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="/父路由/自路由"，一定要带上父路由

<template>
<el-container>
  <el-aside>
    <el-menu v-show="isCollapse" style="padding: 0 10px;" :default-active="1" class="el-menu-vertical-demo">
      <router-link to="/父路由"><el-menu-item index="1">1</el-menu-item></router-link>
      <router-link to="/父路由/子路由"><el-menu-item index="2">2</el-menu-item></router-link>
    </el-menu>
  </el-aside>
  <el-main>

    <router-view></router-view> // 子路由视图变化区域

  </el-main>
</el-container>
</template>
复制代码

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

ok，大功告成！