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

[dsl101]

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:

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?

[metalsadman]

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

[rstoenescu]

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.