多個選項卡的 vuetify 和 vue-router 活動導航欄

Question

我想在瀏覽不同的選項卡時在導航欄中突出顯示相同的菜單。

如上圖所示，在部門選項卡上選擇了所屬。 我仍然想在選擇選擇選項卡時突出顯示所屬菜單。 請在下面查看我的代碼。

導航欄組件

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

路由.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},
  ],
});

當前設置是部門路徑連接到所屬菜單，但我想讓它成為動態的，其中部分選項卡也將導航欄設置為活動狀態。

這兩個組件都在 App.vue 里面（路由的主要 vue 文件）

Answer 1

更新：我現在已經解決了這個問題。

這是我對router.js 所做的

    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},
  ],
});

我創建了一個父組件（組織），其中包含所有其他子組件（部門、部門、職位）並將它們設置為子組件。

如果還有其他最佳實踐可以做到這一點，請隨時分享您的知識。