主页 / 问题 / 1243964
Accepted
Moonwolf45
Asked:2022-02-14 23:32:33 +0800 CST2022-02-14 23:32:33 +0800 CST

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. Best Answer

    根据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

相关问题