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