Direct link to a q-tab?



  • I have a q-tabs on a page that has 5 different tabs a user can view. Is it possible to have a direct link to a tab so that it is automatically opened when visiting the page? I can’t figure out how to setup the URL structure or anything like that.

    Any tips would help!



  • Are you using q-tab or q-route-tab ?

    q-tab

    Use default prop:

    <q-tab default slot="title" name="tab-1" />
    

    q-route-tab

    In case you are using q-route-tab, there are multiple ways to set a default route.

    Set default child
    {
      path: 'parentroute',
      component: ParentComponent,
      children: [
        {
          path: '' // empty path = default child
          component: ChildComponent1
        },
        {
          path: 'posts',
          component: ChildComponent2
        }
      ]
    }
    
    Redirect to specific route
    const routes = [{
      path: 'user'
      children: [
        {
          path: '' // empty path = default child
          redirect: 'user/profile'
        },
        {
          path: 'profile', // will redirect here
          component: ChildComponent1
        },
        {
          path: 'posts',
          component: ChildComponent2
        }
      ]
    }]
    


  • Thanks for your help. My use case was to have a direct link to specific tab panels that housed a datatable of orders. I ended up getting it to work on a path that is like this: site.com/dept/:department

    Example tab setup:

    <q-route-tab name="today" to="today" exact slot="title" icon="local_shipping" label="Due to Ship Today" v-bind:count="shipTodayOrders.length"/>
    <q-route-tab name="late" to="late" exact slot="title" icon="alarm" label="Late Orders" v-bind:count="lateOrders.length"/>
    

    Then in my router I did:

    { 
     path: '/dept/:department', 
     component: load('Dept'), 
     props: true, 
     redirect: '/dept/:department/today', //If a department order type is not specified, redirect to "today" tab
     children: [
       {path: ':orderType', props: true}
      ]
     }
    

    Hope it helps others.