Keep parent q-router-tab active



  • In my app I have the following routes defined:

    const routes = [
      ...
      {
        path: '/tickets',
        component: () => import('layouts/MainLayout.vue'),
        props: { pageLinks: Store.state.navigation.page_links.tickets },
        children: [
          { path: '', component: () => import('pages/tickets/MyTickets.vue') },
          { path: 'mytickets', component: () => import('pages/tickets/MyTickets.vue') },
          { path: 'newticket', component: () => import('pages/tickets/NewTicket.vue') },
          { path: 'followup', component: () => import('pages/tickets/FollowUp.vue') },
        ],
      }
    ]
    

    I’m using q-router-tab to get to the desired page, which is working fine. However, when I go to ‘Tickets’ and then navigate to ‘New ticket’ the active class is removed from the q-router-tab ‘Tickets’. It would be great to prevent this and keep the active class on the ‘Tickets’ tab as long as the user is in a subsection of the ‘Tickets’ page.

    To solve this I see two possible solutions. One is by using beforeEnter as described by Vue Router. Like so:

    const routes = [
      ...
      {
        path: '/tickets',
        component: () => import('layouts/MainLayout.vue'),
        props: { pageLinks: Store.state.navigation.page_links.tickets },
        children: [
          {
            path: '', component: () => import('pages/tickets/MyTickets.vue'),
            beforeEnter: (to, from, next) => {
              // set active_tab in the vuex store to 'tickets'
              next()
            } },
          {
            path: 'mytickets', component: () => import('pages/tickets/MyTickets.vue'),
            beforeEnter: (to, from, next) => {
              // set active_tab in the vuex store to 'tickets'
              next()
            } },
          {
            path: 'newticket', component: () => import('pages/tickets/NewTicket.vue'),
            beforeEnter: (to, from, next) => {
              // set active_tab in the vuex store to 'tickets'
              next()
            } },
          {
            path: 'followup', component: () => import('pages/tickets/FollowUp.vue'),
            beforeEnter: (to, from, next) => {
              // set active_tab in the vuex store to 'tickets'
              next()
            } },
        ]
      }
    ]
    

    The other option I’m thinking about is to use a Router meta field as described in the docu. In that case we should add the following to each route underneath ‘Tickets’:

    meta: { activeTab: 'tickets' }
    

    and add in the corresponding pages/componets:

    mounted() {
        // set active_tab in the vuex store to 'tickets' based on this.$route.matched meta tag
      }
    

    Both options seem a bit verbose. Does someone have a better idea? Or suggestions on how to tackle this?

    Thank you for your help.



  • You have the router object in your component. Maybe there is some info in it you can use, like the current path in history?

    Scott


Log in to reply