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，大功告成！