q-route-tab problem

alienspaces

Hi there,

I must be missing something really simple but I just cannot seem to get the q-route-tab to work.

Here are my routes:

const routes = [
  {
    path: '/',
    component: () => import('layouts/Admin.vue'),
    children: [
      {
        path: '',
        component: () => import('pages/Index.vue')
      },
      {
        path: 'blah',
        component: () => import('pages/Blah.vue')
      }
    ]
  }
]

Here is my layout:

 <q-layout-header>
      <q-tabs>
        <q-route-tab
          slot="title"
          icon="home"
          to="/"
          exact
        />
        <q-route-tab
          slot="title"
          icon="apps"
          to="/blah"
          exact
        />
      </q-tabs>

      <router-link to="/">Go to Home</router-link>
      <router-link to="/blah">Go to Blah</router-link>

    </q-layout-header>

Clicking the tabs results in highlighting and underlining of the tabs as expected however the route does not change, the content does not change from the index page to the blah page…

Clicking a router-link results in highlighting and underlining of the tabs as expected and the route does change!

Any ideas why my clicking the tabs does not work but clicking the links does?

Thanks.

metalsadman

try removing exact props.

alienspaces

@metalsadman Thanks for the reply, unfortunately that did not work.

I tested q-tabs / q-route-tab in Safari on macOS and everything is working as expected so this looks like a problem with Chrome on macOS High SIerra / Chrome Version 71.0.3578.98.

    Dev mode.......... spa
    Quasar theme...... mat
    Quasar CLI........ v0.17.22
    Quasar Framework.. v0.17.18

syflex

Use a named route. That is more effective.
Add name: ‘Index’, and name: ‘Blah’ in your route file. And access it using:
:to="{name: ‘Index’}"
:to="{name: ‘Blah’}"

alienspaces

Thanks @syflex for your suggestion, while using named routes continues to work in Safari this did not resolve the problem with Chrome on macOS. I’ll dig deeper!

alienspaces

Resolved.

I don’t know why but when I disabled Vuejs devtools q-tabs/q-route-tab began to work as expected. I then re-enabled Vuejs devtools and the functionality continued to work as expected.

Thanks for your help!

No More Posting New Topics!

q-route-tab problem