Keep parent q-router-tab active

[DarkLite1]

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.

[s.molinari]

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