'vue-router default child route for tabs

I'm trying to have a homepage with tabs containing 2 lists, with 1 open by default.

I have the following route config, I've changed the names to simplify

let routes = [{
    path: '/',
    name: 'home',
    component: require('./views/Home.vue'),
    children: [{
        path: 'list1',
        name: 'home.list1',
        component: require('./views/List1.vue')
    }, {
        path: 'list2',
        name: 'home.list2',
        component: require('./views/List2.vue')
    }]
}

Inside ./views/Home.vue I have a <router-view></router-view> below 2 <router-link>s for each tab (child route).

When I visit the app route http://domain/ I would like to activate the list1 tab. The only way I can currently do this is if I visit http://domain/list1.

I have tried

children: [{
    path: '',
    name: 'home.list1'

and this initially works well, however if I visit http://domain/list2 both my tab links (router-links) have the active state.

JSFiddle which I can't get to run but helps for context

Is there a better solution to this?

vue.jsvue-router


Solution 1:[1]

Add one more child route with redirect (should be first)

  children: [{
    path: '',
    redirect: 'list1', // default child path
  },
  ...
  ]

Solution 2:[2]

For making a component(tab) appear default at visiting the parent route, you need to add a path as '' (empty string)

The following is a n example from the Vue Router docs

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id', component: User,
      children: [
        // UserHome will be rendered inside User's <router-view>
        // when /user/:id is matched
        { path: '', component: UserHome },

        // ...other sub routes
      ]
    }
  ]
})

Don't use a '/', it will be considered as the root route.

Solution 3:[3]

I need to put the redirect on the parent, and it works on the first load. Otherway it only works when I reload the page.

  • put redirect: 'home.list1' on the parent
  • put your child as path: ''

hope it works.

let routes = [{
        path: '/',
        name: 'home',
        redirect: 'home.list1',
        component: require('./views/Home.vue'),
        children: [{
            path: '',
            name: 'home.list1',
            component: require('./views/List1.vue')
        }, {
            path: 'list2',
            name: 'home.list2',
            component: require('./views/List2.vue')
        }]
    }

Solution 4:[4]

I think what you want to do works if your home route isn't "/" 

routes: [
    { path: '/home', 
        name: 'home',
        component: require('./views/home.vue')
        children: [
            { path: '/', name: 'list1', component: list1 },
            { path: 'list2', name: 'list2', component: list2},
        ],
    }
]

This will load the home component and the list1 component inside of your initial . Then you can user router link to nav to list2:

<router-link :to="{ name: 'list2', params: { ...}}">

Or, maybe I don't understand the question.

Solution 5:[5]

Here is what works.

You have to use redirect: {name: 'home.list1'} (for the named route) property on your parent route 'home'.

Make sure you use the correct redirect property format either for named route (as above) or for path: redirect: '/list1'.

Here is the correct routes config which is only 1 line (the redirect one) different vs your config:

let routes = [{
        path: '/',
        name: 'home',
        redirect: 'home.list1',
        component: require('./views/Home.vue'),
        children: [{
            path: 'list1',
            name: 'home.list1',
            component: require('./views/List1.vue')
        }, {
            path: 'list2',
            name: 'home.list2',
            component: require('./views/List2.vue')
        }]
    }

Then every visit to / (your 'home' route) would be redirected to /list1.

Moreover, the router-link-active and router-link-exact-active will be correctly assigned on child link (both of them) and on parent link (only router-link-active).

This will also work for deeper nested non-child and child routes.

For more redirect & aliasig options see the official docs.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Fareez Ahamed
Solution 3 jc.vargas.valencia
Solution 4 Kyll
Solution 5

Related Questions