上一節搭好了主框架，但是標簽頁和側邊欄只是分別展示了各自的菜單，如何將二者聯動起來？
定義路由規則：當有 children 屬性時，從 children 裏取出 path 填充到側邊欄，如：

{
  path: ‘/‘,
  redirect: ‘/dashboard‘,
  name: ‘Container‘,
  component: Container,
  children: [
    {path: ‘dashboard‘, name: ‘首頁‘, component: Dashboard, },
    {path: ‘article‘, name: ‘文章‘, component: Article, },
  ]
}
 

該路由的 children 有2個子路由，我期望生成如下菜單：

1 新增組件

新增 views/dashboard/index.vue

<template>
  <h1>dashboard</h1>
</template>

views/article/index.vue

<template>
  <h1>Article</h1>
</template>

此時 src 的目錄結構

│  App.vue
│  main.js
├─assets
│      logo.png
├─components
│      HelloWorld.vue
├─container
│      Container.vue
├─router
│      index.js
├─styles
│      index.scss
└─views
    │  TheLogin.vue
    ├─article
    │      index.vue
    └─dashboard
            index.vue
 

2 修改路由

修改 src/router/index.js :

import Vue from ‘vue‘
import Router from ‘vue-router‘
import Login from ‘@/views/TheLogin‘
import Container from ‘@/container/Container‘
import Dashboard from ‘@/views/dashboard‘
import Article from ‘@/views/article‘

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: ‘/login‘,
      name: ‘Login‘,
      component: Login
    },
    {
      path: ‘/‘,
      redirect: ‘/dashboard‘,
      name: ‘Container‘,
      component: Container,
      children: [
        {path: ‘dashboard‘, name: ‘首頁‘, component: Dashboard, },
        {path: ‘article‘, name: ‘文章‘, component: Article, },
      ]
    }
  ]
})
 

3 頁面主框架

修改 src/container/Container.vue
el-header 的樣例菜單替換為

<el-menu default-active="/"
        router
          class="el-menu-demo tab-page"
          mode="horizontal"
          @select="handleSelect"
          active-text-color="#409EFF">
  <el-menu-item index="/">首頁</el-menu-item>
</el-menu>

el-aside 的樣例菜單替換為

<el-menu :default-active="defaultActive"
        router
          class="el-menu-vertical-demo"
          @open="handleOpen"
          :collapse="isCollapse">
  <template v-for="route in $router.options.routes" v-if="route.children && route.children.length">
      <template v-for="item in route.children" >
        <el-menu-item 
          :key="route.path + ‘/‘ + item.path"
          :index="item.path"
        >
          <i class="el-icon-menu"></i>
          <span slot="title">{{ item.name }}</span>
      </el-menu-item>
      </template>
  </template>
</el-menu>

此時的頁面:

vue+elementui搭建後臺管理界面(3側邊欄菜單)