[v1.0] Problem getting q-route-tab to work

  • Sorry for no codepen—really struggling to recreate this one due to router complexities, but I’m trying to make this app load the last active tab when the user navigates to a new ‘event’. Relevant bits of router:

    }, {
      path: ':event',
      name: 'Event',
      component: () => import('pages/Event'),
      children: [{
        path: 'dashboard',
        name: 'dashboard',
        components: {
          tab: () => import('components/event/Dashboard')
      }, {
        path: 'members',
        name: 'members',
        components: {
          tab: () => import('components/event/Members')
      }, {

    Navigation and display works fine, apart from the tabs at the top of the Event component. I’ve duplicated their functionality with regular router-link components in Event.vue like so:

          <q-route-tab label="Dashboard" to="dashboard" />
          <q-route-tab label="Members" to="members" />
          <router-link tag="q-btn" to="dashboard" active-class="text-red">Dashboard</router-link>
          <router-link tag="q-btn" to="members" active-class="text-red">Members</router-link>
        <router-view name="tab" />
      const loadTab = (to, from, next) => {
        if (to.name === 'Event') {  // We landed on the event 'home', so move to whichever tab was last active
          const lastTab = store.getters.lastTab(to.params.event) || 'dashboard'
        } else {
      export default {
        beforeRouteEnter: loadTab,
        beforeRouteUpdate: loadTab,
        data: () => ({

    What I see on the Event page is the correct content (i.e. the Dashboard or Members component loads), but the q-route-tab has the ‘wrong’ tab higlighted, whereas the router-link button is correct:

    Event with ‘Dashboard’ as the last tab:

    Event with ‘Members’ as the last tab:

    See how the red router-link buttons match the component, but the q-route-tab ‘active’ state doesn’t. It’s ‘one-behind’, like it didn’t update when the route changed—i.e. if I navigate to a series of Events that were all last on Dashboard, the Dashboard tab is active after the second navigation.

    I’ve tried and failed to reproduce this in a codepen, but with vuex, router, and firebase all involved in my actual app, I’m not 100% sure I’m really reproducing my scenario. Any ideas where to start figuring this out?

  • try setting name prop of your q-route-tab elements.

  • Admin

    First thing that caught my attention is that routes start with “/”. So to="dashboard" is incorrect.
    Secondly, there’s the exact prop (works just like <router-link>) – not sure if u need it, just mentioning for completeness.
    Thirdly, pls try to create a bare-bone reproducible case in a github test repo and paste me the link so I can investigate, if you still reproduce this after the “/” issue is gone.

Log in to reply