vue-router 选项卡的默认子路由

Question

我正在尝试创建一个带有包含 2 个列表的选项卡的主页，其中 1 个默认打开。

我有以下路由配置，我更改了名称以简化

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

在 ./views/Home.vue 我有一个 <router-view></router-view> 下面 2 <router-link> 每个选项卡（子路由）。

当我访问应用程序路由 http://domain/ 我想激活 list1 选项卡。我目前可以执行此操作的唯一方法是访问 http://domain/list1 。

我努力了

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

这最初运行良好，但是如果我访问 http://domain/list2 我的两个选项卡链接（路由器链接）都处于活动状态。

我无法运行但有助于上下文的 JSFiddle

有更好的解决方案吗？

原文由 Titan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

添加一个带有重定向的子路由（应该是第一个）

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

原文由 NaN 发布，翻译遵循 CC BY-SA 4.0 许可协议