v0.14 beta - route tabs - default

  • 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?


  • 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

  • @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!

  • Admin


    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.

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

  • @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?

  • @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.

  • Admin

    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

Log in to reply