q-route-tab problem



  • 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.



  • try removing exact props.



  • @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
    


  • 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’}"



  • 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!



  • 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!


Log in to reply