vue+elementui搭建后台管理界面(3侧边栏菜单)

上一节搭好了主框架，但是标签页和侧边栏只是分别展示了各自的菜单，如何将二者联动起来？ 定义路由规则：当有 children 属性时，从 children 里取出 path 填充到侧边栏，如：

1{
2  path: '/',
3  redirect: '/dashboard',
4  name: 'Container',
5  component: Container,
6  children: [
7    {path: 'dashboard', name: '首页', component: Dashboard, },
8    {path: 'article', name: '文章', component: Article, },
9  ]
10}

该路由的 children 有2个子路由，我期望生成如下菜单：

1 新增组件

新增 views/dashboard/index.vue

1<template>
2  <h1>dashboard</h1>
3</template>

views/article/index.vue

1<template>
2  <h1>Article</h1>
3</template>

此时 src 的目录结构

1│  App.vue
2│  main.js
3├─assets
4│      logo.png
5├─components
6│      HelloWorld.vue
7├─container
8│      Container.vue
9├─router
10│      index.js
11├─styles
12│      index.scss
13└─views
14    │  TheLogin.vue
15    ├─article
16    │      index.vue
17    └─dashboard
18            index.vue

2 修改路由

修改 src/router/index.js :

1import Vue from 'vue'
2import Router from 'vue-router'
3import Login from '@/views/TheLogin'
4import Container from '@/container/Container'
5import Dashboard from '@/views/dashboard'
6import Article from '@/views/article'
7
8Vue.use(Router)
9
10export default new Router({
11  routes: [
12    {
13      path: '/login',
14      name: 'Login',
15      component: Login
16    },
17    {
18      path: '/',
19      redirect: '/dashboard',
20      name: 'Container',
21      component: Container,
22      children: [
23        {path: 'dashboard', name: '首页', component: Dashboard, },
24        {path: 'article', name: '文章', component: Article, },
25      ]
26    }
27  ]
28})

3 页面主框架

修改 src/container/Container.vue
el-header 的样例菜单替换为

1<el-menu default-active="/"
2        router
3          class="el-menu-demo tab-page"
4          mode="horizontal"
5          @select="handleSelect"
6          active-text-color="#409EFF">
7  <el-menu-item index="/">首页</el-menu-item>
8</el-menu>

el-aside 的样例菜单替换为

1<el-menu :default-active="defaultActive"
2        router
3          class="el-menu-vertical-demo"
4          @open="handleOpen"
5          :collapse="isCollapse">
6  <template v-for="route in $router.options.routes" v-if="route.children && route.children.length">
7      <template v-for="item in route.children" >
8        <el-menu-item 
9          :key="route.path + '/' + item.path"
10          :index="item.path"
11        >
12          <i class="el-icon-menu"></i>
13          <span slot="title">{{ item.name }}</span>
14      </el-menu-item>
15      </template>
16  </template>
17</el-menu>

此时的页面: