嵌套路由 vue 默认

Question

我有这个根 vue 组件

<template>
<router-view></router-view>
</template>

Router-view 应该匹配 /main、/login url，如下面的路由所示

{path: '/login',component: 'login.vue'}
{path: '/main',component: 'main.vue', children:[
  {path: '/mainchild1',component: 'mainchild1.vue'},
  {path: '/mainchild2',component: 'mainchild2.vue'
]}

主要组件是侧边栏和内容视图，应使用 /main 子项填充：

    //Main.vue
    <template>
    <sidebar></sidebar>
    <router-view></router-view>
    </template>

这里的想法是保留一个侧边栏并在一边渲染

1. mainchild1.vue（在 /main/mainchild1 上）
2. mainchild2.vue（在 /main/mainchild1 上）

现在，如果 url 中没有指定路由，我想重定向到主组件 (/main)，但至少填充了子视图（mainchild1 或 mainchild2）。

这是我苦苦挣扎的地方，感谢任何帮助/提示。

我尝试将“/”上的重定向到 /main/mainchild1，但它只是渲染根内容，使用 mainchild1.vue，因此删除了侧边栏。

我还在学习 vue，可能还缺少一些路由技术的步骤。

更新

好的，看来我应该从子元素中删除 /。这样就可以了。

决定这是否有任何帮助，或者我应该删除它 谢谢 大卫

Answer 1

route.js

[
  path: '/', redirect: '/main/mainchild1',
  path: '/main', redirect: '/main/mainchild1', component: 'main.vue', children: [
    { path: '/main/mainchild1', component: mainchild1.vue },
    { path: '/main/mainchild2', component: mainchild2.vue }
  ] 
]

app.vue

<template>
 <sidebar v-if="isLoggedIn"/>
 <router-view></router-view> <!-- components mapped with route '/' or '/main' will render here -->
</template>

main.vue

<template>
 <router-view></router-view> <!-- components mapped with route '/main/mainchild1' or '/main/mainchild2' will render here -->
</template>