Vue.js vuetify和vue路由器多个选项卡的活动导航栏

我想实现在浏览不同选项卡时在导航栏中突出显示相同的菜单

如上图所示，在“部门”选项卡上选择了“归属”。在选择“选择”选项卡时，我仍然希望突出显示“归属”菜单。请看下面我的代码

导航栏组件

 <v-list dense>
    <v-list-item v-for="item in items" :to="item.to" :key="item.title" link>
      <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' },
          { to: { name: 'department'}, title: 'Department', icon: 'mdi-home-city' },
          { to: { name: 'salary'}, title: 'Salary', icon: 'mdi-cash' },
        ],
        mini: false,
      }
    },
  }
</script>

   <template>
  <v-tabs class="mb-2" mobile-break-point="200px">
    <v-tab v-for="tab in navbarTabs" 
      :key="tab.id" 
      :to="tab.to"
    >
    {{ tab.name }}
    </v-tab>
  </v-tabs>
</template>

<script>
export default {
  data() {
  return {
      navbarTabs: [
      {
        id: 0,
        name: "Department",
        to: { name: 'department' }
      },
      {
        id: 1,
        name: "Section",
        to: { name: 'section' }
      },
    ]
  }
  }
}
</script>

当前的设置是，部门路径连接到“归属”菜单，但我想使其成为动态的，其中“部分”选项卡也会将导航栏“归属”设置为活动状态

---

这两个组件都位于App.vue（路由的主vue文件）中。

更新：我现在已经解决了这个问题

下面是我使用router.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 },
    { path: '/belong/department', name: 'department', component: Department},
    { path: '/belong/section', name: 'section', component: Section },
    { path: '/salary', name: 'salary', component: Salary},
  ],
});

    export const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/404', component: NotFound },  
    { path: '*', redirect: '/404' },
    { path: '/', redirect: '/dashboard' },  
    { path: '/dashboard', name: 'dashboard', component: Dashboard },
    { path: '/org', name: 'organization', component: Organization, 
      children: [
        { path: 'department', name: 'department', component: Department},
        { path: 'section', name: 'section', component: Section },
        { path: 'position', name: 'position', component: Position }
      ],
    },
    { path: '/salary', name: 'salary', component: Salary},
  ],
});

我创建了一个包含所有其他子组件（部门、部门、职位）的父组件（组织），并将它们设置为子组件

---

如果有其他最佳实践可以做到这一点，请随时与我们分享您的知识。

您也能告诉我们您的路线吗？你好，Jesper。我现在编辑了我的帖子。打开我的帖子