여러 탭의 활성 탐색바를 시각화 및 vue-requency 활성 탐색기

여러 탭의 활성 탐색바를 시각화 및 vue-requency 활성 탐색기

다른 탭을 검색하면서 동일한 메뉴를 탐색 모음에서 강조 표시하기를 원한다.

위의 이미지에서 볼 수 있듯이, 소속은 부서 탭에서 선택된다.나는 여전히 선택 탭을 선택하면서 소속 메뉴를 강조하고 싶었다.아래 내 코드를 참조하십시오.

Navbar 구성 요소

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

Route.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 파일)

업데이트: 이제 이 문제를 해결했다.

여기 내가 라우터 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},
  ],
});

나는 다른 모든 하위 구성요소(부서, 부문, 직위)를 보유하는 상위 구성요소(조직)를 만들어 자녀로 설정했다.

이 작업을 수행하는 다른 모범 사례가 있다면 언제든지 지식을 공유하십시오.

참조URL: https://stackoverflow.com/questions/59408388/vuetify-and-vue-router-active-navbar-for-multiple-tabs