v0.14 beta - route tabs - default

[levi730]

Hello!

I’m just getting started with v.0.14 (and Quasar in general), and I have a layout with a series of QRouteTabs. It’s up and working properly, but I’m wondering if there’s a preferred way to specify a default tab.

I was able to specify my tab as the default using:

{ path: '*', component: load('MyComponent') }

… but of course, that kills any chance of using the Error404 component for catching missing/malformed routes.

Is there a better way?

Thanks!

[benoitranque]

Check out the bottom of this page in the vue-router docs
basically set a default path using

{path: '', redirect: '/path/to/default' }

note the use of redirect to avoid duplicating component load

[levi730]

@benoitranque Perfect, thank you!! I read that page, but the idea of nested routes applying to my situation didn’t click until I went through it again. Thanks for the help!

[rstoenescu]

Hi,

QRouteTabs should not have a “default” selection. It breaks the flow of your app and brings unpredictability. The current route dictates what tab is selected. Otherwise, you can have a QRouteTab default selected which points to another route… what this means is that as soon as this tab gets rendered it should change route… chaos can entail.

[matt]

Yes, it is the route that would have the default selection, with the tabs being linked directly to the route.

[benoitranque]

@rstoenescu lets say I have route /myroute with tabs /myroute/tab1, /myroute/tab2, /myroute/tab3

If /myroute has no content, it makes sense to redirect to /myroute/tab1 by default.

Of course there is no /myroute tab, which would lead to the problem you mentioned of both the /myroute and /myroute/tab1 being hilighted.

Or I am missing something?

[matt]

@benoitranque As you say, make the router redirect /myroute to /myroute/tab1 and your problem should be solved.
Just make sure that your tabs are only looking for the /myroute/tab1 and /myroute/tab2 paths, with none corresponding to the route /myroute path and you should be fine.

[rstoenescu]

The correct way is to correctly configure the routes in /src/router.js. Like making a redirect there or using a default subchild. More info is available at https://router.vuejs.org