VueJs Выделенные пункты меню

Question

У меня есть меню написанное на 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>

Как мне сделать, чтобы у меня сразу был выделен пункт на который я захожу, ну точнее когда перехожу по пунктам они выделяются, но на первый пункт я попадаю через redirect из другого шаблона и он не выделяется. Вообщем как мне это сделать?

Вот что висит в 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' }
    ],
  }
}

Answer 1

Согласно 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/[email protected]/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://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

БЛОГ НА HUSL

VueJs Выделенные пункты меню

Ответы (1 шт):