vue-router 嵌套路由

背景：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. 子路由就可以只关注视图部分，不用再引用侧边栏的公用部分了～视图会在父路由里的 中更新

ok，大功告成！