RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 1243964
Accepted
Moonwolf45
Moonwolf45
Asked:2022-02-14 23:32:33 +0000 UTC2022-02-14 23:32:33 +0000 UTC 2022-02-14 23:32:33 +0000 UTC

VueJs 突出显示的菜单项

  • 772

我有一个用 写的菜单vue,如下所示:

<router-link v-for="(item, i) in menu" :key="i" :to="item.path" custom v-slot="{ navigate }">
    <v-list-item @click="navigate" @keypress.enter="navigate" role="link">
        <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
        </v-list-item-icon>

        <v-list-item-content>
            <v-list-item-title>{{ $t(item.name) }}</v-list-item-title>
        </v-list-item-content>
    </v-list-item>
</router-link>

我怎样才能使它立即拥有我要去的项目,嗯,更准确地说,当我浏览这些项目时,它们被突出显示,但是我通过从另一个模板重定向到第一个项目并且它没有突出显示. 一般来说,我该怎么做?

这是里面的内容menu:

data () {
  return {
    menu: [
      { path: '/', name: 'main.bill', icon: 'account_balance_wallet' },
      { path: '/history', name: 'main.history', icon: 'history' },
      { path: '/planning', name: 'main.planning', icon: 'business_center' },
      { path: '/records', name: 'main.recording', icon: 'add_box' },
      { path: '/settings', name: 'main.settings', icon: 'settings' }
    ],
  }
}
vue.js
  • 1 1 个回答
  • 10 Views

1 个回答

  • Voted
  1. Best Answer
    Mikalai Parakhnevich
    2022-02-15T00:35:11Z2022-02-15T00:35:11Z

    根据API v-list-item v-list-item可以用作router-link. 我认为您的示例可以采用以下形式:

    <v-list>
        <v-list-item :to="item.path" v-for="(item, i) in menu" :key="i" role="link">
          <v-list-item-icon>
                  <v-icon>{{ item.icon }}</v-icon>
              </v-list-item-icon>
    
          <v-list-item-content>
            <v-list-item-title>{{ item.name }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    

    为了清楚起见,工作版本:

    const test = Vue.component("test", {
      template: `<div>Полный путь -{{ $route.fullPath }}</div>`,
    });
    
    const router = new VueRouter({
      routes: [{
        path: "/:id",
        name: 'id',
        component: test,
      }, ],
    });
    
    new Vue({
      el: "#app",
      data() {
        return {
          menu: [{
              path: '/',
              name: 'main.bill',
              icon: 'account_balance_wallet'
            },
            {
              path: '/history',
              name: 'main.history',
              icon: 'history'
            },
            {
              path: '/planning',
              name: 'main.planning',
              icon: 'business_center'
            },
            {
              path: '/records',
              name: 'main.recording',
              icon: 'add_box'
            },
            {
              path: '/settings',
              name: 'main.settings',
              icon: 'settings'
            }
          ]
        }
      },
      router,
      vuetify: new Vuetify({
        theme: {
          dark: true
        },
      }),
      watch: {
        "$route.fullPath": {
          handler: function(path) {
            this.setNewPath(path);
          },
        },
      },
      created() {
        this.setNewPath();
      },
      methods: {
        goPath() {
          this.$router.push(this.path);
        },
        setNewPath(path) {
          this.path = path || this.$route.fullPath;
        },
      },
    });
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.0/vue.js"></script>
    <script src="https://unpkg.com/vue-router@2.8.0/dist/vue-router.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
    
    <div id="app">
      <v-text-field id="input" v-if="path" label="Текущий URL" type="text" name="path" v-model="path" style="width: 100%; padding: 10px" @keyup.enter="goPath"> </v-text-field>
      <v-list>
        <v-list-item :to="item.path" v-for="(item, i) in menu" :key="i" role="link">
          <!--<v-list-item-icon>
                  <v-icon>{{ item.icon }}</v-icon>
              </v-list-item-icon>
              -->
    
          <v-list-item-content>
            <v-list-item-title>{{ item.name }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    
      <router-view></router-view>
    </div>

    • 1

相关问题

  • Vue.js 如何拖放表格内容

  • 如何完成切换并单击组?

  • 如何将内容加载到属于循环元素的块中?

  • 带有计数器的 VueJs 循环

  • Vue.js 如何制作导航箭头

  • 启动 npm serve 时抛出错误

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    表格填充不起作用

    • 2 个回答
  • Marko Smith

    提示 50/50,有两个,其中一个是正确的

    • 1 个回答
  • Marko Smith

    在 PyQt5 中停止进程

    • 1 个回答
  • Marko Smith

    我的脚本不工作

    • 1 个回答
  • Marko Smith

    在文本文件中写入和读取列表

    • 2 个回答
  • Marko Smith

    如何像屏幕截图中那样并排排列这些块?

    • 1 个回答
  • Marko Smith

    确定文本文件中每一行的字符数

    • 2 个回答
  • Marko Smith

    将接口对象传递给 JAVA 构造函数

    • 1 个回答
  • Marko Smith

    正确更新数据库中的数据

    • 1 个回答
  • Marko Smith

    Python解析不是css

    • 1 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5