Vuetify与Vue Router实现多标签页导航栏菜单高亮联动

Got it, let's fix this issue where your Department menu only highlights when you're on the department route, but doesn't stay active when you switch to the Section tab. Here's how to adjust your code to make that happen:

The Problem Right Now #

Your current setup uses Vuetify's v-list-item with Vue Router's to prop, which only activates the menu item when the route name exactly matches the one in item.to. Since section is a separate route name, the menu doesn't stay highlighted when you switch over.

Solution 1: Add a Matched Routes List to Navigation Items #

We'll extend your navigation items to include a list of route names that should trigger the menu's active state, then add a custom method to check if the current route is in that list.

Update your navigation component like this:

<v-list dense>
  <v-list-item 
    v-for="item in items" 
    :to="item.to" 
    :key="item.title" 
    link
    <!-- Bind the active state to our custom check -->
    :active="isMenuItemActive(item)"
  >
    <v-list-item-icon>
      <v-icon>{{ item.icon }}</v-icon>
    </v-list-item-icon>
    <v-list-item-content>
      <v-list-item-title>{{ item.title }}</v-list-item-title>
    </v-list-item-content>
  </v-list-item>
</v-list>
<script>
export default {
  data () {
    return {
      drawer: true,
      items: [
        { 
          to: { name: 'dashboard'}, 
          title: 'Dashboard', 
          icon: 'mdi-account',
          matchedRoutes: ['dashboard'] // List of routes that activate this menu
        },
        { 
          to: { name: 'department'}, 
          title: 'Department', 
          icon: 'mdi-home-city',
          matchedRoutes: ['department', 'section'] // Include section here!
        },
        { 
          to: { name: 'salary'}, 
          title: 'Salary', 
          icon: 'mdi-cash',
          matchedRoutes: ['salary']
        },
      ],
      mini: false,
    }
  },
  methods: {
    isMenuItemActive(item) {
      // Check if current route name is in the item's matched routes
      return item.matchedRoutes.includes(this.$route.name);
    }
  }
}
</script>

Solution 2: Use Route Meta Tags (Alternative Approach) #

If you prefer to keep route grouping logic in your router config instead of the navigation component, you can add meta fields to your routes:

First, update your Routes.js:

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import Dashboard from './views/Dashboard'
import Department from './views/Department'
import Section from './views/Section'
import Salary from './views/Hello'
export const router = new VueRouter({
  mode: 'history',
  routes: [
    { 
      path: '/dashboard', 
      name: 'dashboard', 
      component: Dashboard,
      meta: { menuGroup: 'dashboard' } // Add meta group
    },
    { 
      path: '/belong/department', 
      name: 'department', 
      component: Department,
      meta: { menuGroup: 'department' }
    },
    { 
      path: '/belong/section', 
      name: 'section', 
      component: Section,
      meta: { menuGroup: 'department' } // Same group as Department
    },
    { 
      path: '/salary', 
      name: 'salary', 
      component: Salary,
      meta: { menuGroup: 'salary' }
    },
  ],
});

Then adjust your navigation component to check the route's meta group:

<v-list dense>
  <v-list-item 
    v-for="item in items" 
    :to="item.to" 
    :key="item.title" 
    link
    :active="this.$route.meta.menuGroup === item.menuGroup"
  >
    <v-list-item-icon>
      <v-icon>{{ item.icon }}</v-icon>
    </v-list-item-icon>
    <v-list-item-content>
      <v-list-item-title>{{ item.title }}</v-list-item-title>
    </v-list-item-content>
  </v-list-item>
</v-list>
<script>
export default {
  data () {
    return {
      drawer: true,
      items: [
        { 
          to: { name: 'dashboard'}, 
          title: 'Dashboard', 
          icon: 'mdi-account',
          menuGroup: 'dashboard'
        },
        { 
          to: { name: 'department'}, 
          title: 'Department', 
          icon: 'mdi-home-city',
          menuGroup: 'department'
        },
        { 
          to: { name: 'salary'}, 
          title: 'Salary', 
          icon: 'mdi-cash',
          menuGroup: 'salary'
        },
      ],
      mini: false,
    }
  }
}
</script>

How This Works #

Both solutions override Vuetify's default active menu logic. Instead of only matching the exact route name, we're checking if the current route falls into a group of related routes that should keep the menu item highlighted. Either approach will make the Department menu stay active when you switch to the Section tab.

内容的提问来源于stack exchange，提问作者Jim E Russel