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

    <template>
      <div>
        <q-tabs>
          <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>
        </q-tabs>
        <router-view name="tab" />
      </div>
    </template>
    
    <script>
      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'
          next(`/${to.params.event}/${lastTab}`)
        } else {
          next()
        }
      }
    
      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:
    0_1551992997510_dae2b1c0-c659-4922-8c95-03b5d518aa66-image.png

    Event with ‘Members’ as the last tab:
    0_1551993014486_4a3b5ad2-c92f-4e37-a496-545bc7b01748-image.png

    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