vue3嵌套路由

本人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/-/