q-tabs with named routes / parameters

  • I’m trying to use <q-tabs> to help navigate with named routes and parameters. An example route is:

      <router-link :to="{name: 'show_path', params: {id: id}}">
        <button class="primary">

    This would route to /show/1 for example. I was hoping to use the same strategy with the <q-tabs> however it looks like they (currently) only support static paths?

    Anybody have experience here? I guess one approach would be to just string concat the path, not ideal but should work.

  • So, another thought I had was to make use of Vuex to store the current id. Not exactly sure I like that idea but I also didn’t get very far trying it … any advice on getting a variable into the “route” parameter (i.e. how can I pass the “/app/show/2” via a computed property)?

    <q-tabs slot="navigation">
      <q-tab icon="alarm" route="/app/show/2" exact append>Show</q-tab>
      <q-tab icon="alarm" :route="showRoute" exact append>Show</q-tab>

  • Well not sure what I was doing wrong before the the following works!

        <!-- Navigation Tabs -->
        <q-tabs slot="navigation">
          <q-tab icon="alarm" :route=detailsPath exact append>Details</q-tab>

    In the data method I simply calculate the correct path (not sure how to get the JS formatting to work).

      data () {
        return {
          detailsPath: '/app/show/' + this.$route.params.id

Log in to reply