背景：vue 项目，最近研究了一下 vue-router 嵌套路由，简单说，就是我们平时看到的多级路由，例如：/user/project 等等，不仅从直观看上去更清晰明了，也减少了一些不必要的代码，下面会主要介绍 vue-router 的 children 属性

优点：父路由的东西，子路由可以继承，省去了同样的组件重复引用

代码如下：

（本 demo 为 父路由提供侧边栏，子路由只改变右侧内容区...）

1./router/index.js 配置嵌套路由关系

{      path: '/父路由',      component: resolve => require(['@/views/xx/xxx'], resolve), // 父路由的公共部分      children: [        {          path: '', // 进入父路由时，右侧内容区首先显示的内容          name: 'xxx',          component: resolve => require(['@/views/xx/xxx'], resolve)        },        {          path: 'xxx',// 其他子路由，这里注意，不要加 '/'，否则会匹配根路由          name: 'xxx',          component: resolve => require(['@/views/xx/xxx'], resolve)        }      ]    },复制代码

2.父路由.vue

ps：这里注意一下，router-link to="/父路由/自路由"，一定要带上父路由

    复制代码

3. 子路由就可以只关注视图部分，不用再引用侧边栏的公用部分了～视图会在父路由里的<router-view></router-view> 中更新

ok，大功告成！