CODEWITHSUNDEEP
vue.jsvuetify.jsvue-router
Jim E Russel
Jim E Russel

Reputation: 495

vuetify and vue-router active navbar for multiple tabs

I would like to achieve highlighting the same menu in a navbar while browsing different tabs.

enter image description here

As seen on the image above, belong is selected while on the department tab. I still wanted to highlight the belong menu while selecting the selection tab. Please see my code below.

Navbar component

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

Router Tab Component

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

The current setup is that department path is connected to the belong menu, but I wanted to make it a dynamic wherein section tab will also set the navbar belong into active.

Both of these components are inside the App.vue (main vue file for routing)

Upvotes: 0

Views: 2163

Answers (1)

Jim E Russel
Jim E Russel

Reputation: 495

UPDATE: I have now fixed this issue.

Here is what I did with the 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},
  ],
});

I created a parent component (organization) that holds all the other sub components (department, section, position) and set them as children.

If there are other best practices to do this, please feel free to share your knowledge.

Upvotes: 2

Related Questions