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!

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!

@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

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.

Use a .env file for local development/docker-compose etc

.env

export APP_API_HOST=http://localhost
export APP_API_PORT=8080

Change the above values during deployment depending on your environment.

$ source .env

quasar.conf.js

    build: {
      env: {
        APP_API_HOST: JSON.stringify(process.env.APP_API_HOST),
        APP_API_PORT: JSON.stringify(process.env.APP_API_PORT)
      },

If you are deploying using GitlabCI/Docker/K8s or whatever environment injection is probably what you are after anyway.