Question

我有这个根Vue组件

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

路由器视图应该匹配 / main ， / login 网址，如以下路由所示

{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>

这里的想法是保留侧边栏并放在一边

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

现在，如果在url中未指定任何路由，我想重定向到主要组件（/ main），但至少要填充子视图（mainchild1或mainchild2）。

我在这里努力奋斗，任何帮助/提示都值得赞赏。

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

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

已更新

好吧，看来我应该从子元素中删除/。这样工作。

要确定这是否有帮助，或者我应该删除此内容谢谢大卫（Davide）

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>

嵌套路由vue默认

1 个答案: