选项卡的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,我无法运行,但有助于上下文

有更好的解决方案吗？

Answer 1

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

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

Answer 2

您需要将重定向放在父级上，它在第一次加载时起作用。否则，它仅在我重新加载页面时才起作用。

• 将重定向：'home.list1'放在父级上
• 把你的孩子作为路径：''

希望它有效。

let routes = [{
        path: '/',
        name: 'home',
        redirect: {name: 'home.list1'}, // Redirect to named route
        // redirect '/list2' // Or redirect to path
        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 3

为了使组件（选项卡）在访问父路由时显示为默认值，您需要添加一个路径为 '' （空字符串）

以下是 Vue Router 文档中的示例

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

不要使用“/”，它将被视为根路由。

Answer 4

我认为如果你的主路线不是“/”，你想要做的事情就有效

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

这将加载 home 组件和 list1 组件在您的初始 . 然后你可以使用路由器链接到 nav 到 list2：

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

或者，也许我不明白这个问题。