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



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


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

Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.