Vue-router default child route for tabs

Question

I am trying to create a homepage with tabs containing 2 lists, by default 1.

I have the following route configuration, I 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.vueI have <router-view></router-view>below 2 <router-link>for each tab (child route).

When I visit the application route http://domain/, I would like to activate the tab list1. The only way I can do now is to visit http://domain/list1.

I tried

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

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

JSFiddle , which I cannot run, but helps for context

Is there a better solution for this?

Answer 1

, () , '' ( )

n Vue Router

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

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

'/', .

Answer 2

, , "/"

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

list1 . nav 2:

, , .