本人vue不熟练,最初我也不知道嵌套路由是干嘛用的,直到后来有个需求是在两个VUE组件中都设置<router-view />
,然后两个组件需要挂载的元素不一样。
本人的项目结构:
然后App.vue里面写死了直接挂载Index.vue,然后Index.vue有两个按钮可以挂载A.vue和B.vue。然后A.vue可以挂载C.vue
相当于Index.vue组件可以挂载A.vue,A.vue可以挂载C.vue,这就是嵌套。
实现关键
1. 配置路由文件
src目录下新建router/routes.js文件。
const routes = [
{
// name: 'a',
path: '/a',
component: () => import('../components/A'),
children:[
{
path: 'c',
component: () => import('../components/C'),
}
]
},
{
name: 'b',
path: '/b',
component: () => import('../components/B')
}
];
export default routes
2. 配置<router-view />
标签到组件
分别在Index.vue和A.vue两个组件添加,
<template>
<div>
...
<router-view />
...
</div>
</template>
本人vue3嵌套路由gitee源码
https://gitee.com/-/ide/project/shenshuxin01/vue3-QianTao-router/edit/master/-/