Problem with QTabs routing

mlabelle

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…?

rstoenescu

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

mlabelle

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.

rstoenescu

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.

mlabelle

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?

rstoenescu

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!

mlabelle

It works now, thanks for your help!

No More Posting New Topics!

Problem with QTabs routing