Problem with QTabs routing



  • Hello, I’m trying to use routed QTabs and I’m having an odd issue. It might be me not understanding routing very well so here goes: When I click on a tab, everything works fine and my view shows up, the URL changes and the tab is selected. However, if I access the tab’s URL directly, when the page loads, the correct view shows up but no tab is selected. I’m not sure what, if anything, I’m doing wrong.

    Here is the related code :

    router.js

    {
                  path: '/clients/:id',
                  name: 'ClientView',
                  component: ClientView,
                  children: [
                    {
                      path: '/clients/:id/dashboard',
                      name: 'ClientViewDashboard',
                      components: { ClientViewTabs: ClientViewDashboard }
                    },
                    {
                      path: '/clients/:id/details',
                      name: 'ClientViewDetails',
                      components: { ClientViewTabs: ClientViewDetails }
                    }
                  ]
    }
    

    And my tabs :

    <template>
      <q-tabs>
        <q-route-tab :to="{name: 'ClientViewDashboard', params: {id: 5}}" slot="title" label="Dashboard" />
        <q-route-tab :to="{name: 'ClientViewDetails', params: {id: 5}}" slot="title" label="Details" />
    
        <router-view name="ClientViewTabs"></router-view>
      </q-tabs>
    </template>
    

    Am I missing something…?


  • Admin

    Hi, it may be due to the params. Can you make a quick test without specifying QRouteTabs with params pls?



  • Thanks for the quick reply!

    Just tried without params (I actually removed them everywhere just for the test) and it doesn’t seem to work either.


  • Admin

    Last test: does a <router-link :to="{name: 'ClientViewDetails'}">...</router-link> gets the ‘active’/‘router-link-active’ class? If not, then it’s a bug in Vue Router that should be reported.



  • Seems like it does : <a href="#/clients/5/details" class="router-link-exact-active open active">test</a>.

    Strange thing is, here is the generated HTML when I access the page directly :

    <div class="q-tab column flex-center relative-position router-link-exact-active open active icon-and-label text-tertiary"><i aria-hidden="true" class="q-tab-icon q-icon material-icons">aspect_ratio</i><span class="q-tab-label">Client Details</span> <!----><div class="q-tabs-bar" style="display: none;"></div></div>
    

    And this is when I manually click on the tab :

    <div class="q-tab column flex-center relative-position router-link-exact-active open active active icon-and-label text-tertiary"><i aria-hidden="true" class="q-tab-icon q-icon material-icons">aspect_ratio</i><span class="q-tab-label">Client Details</span> <!----><div class="q-tabs-bar"></div></div>
    

    Seems like the first one is setting display: none to the div with the q-tabs-bar class?


  • Admin

    Ah, I see they changed the “active” class for exact router links in latest Vue Router versions. Pushed a commit to update Quasar using this. Can you npm update your edge version and test it again? Thanks for the details!



  • It works now, thanks for your help!


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.