vue-router default child route for tabs

Question

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?

Answer 1

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

Answer 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.

Answer 3

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

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

Answer 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.