No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    q-tabs with named routes / parameters

    Help
    1
    3
    2102
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • krsyoung
      krsyoung last edited by

      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.

      1 Reply Last reply Reply Quote 0
      • krsyoung
        krsyoung last edited by

        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>
        1 Reply Last reply Reply Quote 0
        • krsyoung
          krsyoung last edited by rstoenescu

          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
              }
            }
          
          1 Reply Last reply Reply Quote 2
          • First post
            Last post