q-tabs with named routes / parameters

krsyoung

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">
      Show
    </button>
  </router-link>

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.

krsyoung

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>
</q-tabs>

krsyoung

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>
    </q-tabs>

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
    }
  }