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>

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

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

如果还有其他最佳做法，请随时分享您的知识。

多个标签的vuetify和vue-router活动导航栏

1 个答案: