vue-router 嵌套子路由无效，不显示页面问题

项目场景：

在中大型vue项目中，嵌套路由是避不开的话题

---

问题描述

配置vue-router的嵌套子路由后发现导航过去页面无效

{
        path: '/business',
        name: 'Business',
        component: () => import('@/view/business/Index.vue'),
        children: [
            {
                path:'add',
                name:'AddProject',
                component: () => import('@/view/business/AddProject.vue')
            }
        ]
    }

---

原因分析：

routes在配置完后，一个层级的路由对应页面中的一个<router-view>标签。

---

解决方案：

也就是说在配置好嵌套路由后，别忘了在需要开始展示嵌套组件的地方加上一套<router-view>标签。有几层嵌套，想要展示这一层路由，就要有对应的<router-view>来展示组件，如果组件不多的情况下，建议同级路由处理即可。