Direct link to a q-tab?

[thindery]

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!

[benoitranque]

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

[thindery]

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.