Element-ui实现左侧二级导航

这里使用的Element文档版本是2.8.2。

路由文件index.js：

import Vue from 'vue'
import Router from 'vue-router'
import Form from '@/components/Form'
import Data from '@/components/Data'
import Radio from '@/components/Radio'
import Checkbox from '@/components/Checkbox'
import Table from '@/components/Table'
import Tag from '@/components/Tag'
import Button from '@/components/Button'
import Tabs from '@/components/Tabs'
import Echarts from '@/components/Echarts'

Vue.use(Router);

let router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'index',
      redirect: '/form/radio'
    },
    {
      path: '/form',
      name: 'form',
      component: Form,
      meta: {
        title: 'Form',
        icon: 'el-icon-eleme'
      },
      children: [
        {
          path: '/form/radio',
          name: 'radio',
          component: Radio,
          meta: {
            title: 'Radio'
          }
        },
        {
          path: '/form/checkbox',
          name: 'checkbox',
          component: Checkbox,
          meta: {
            title: 'Checkbox'
          }
        }
      ]
    },
    {
      path: '/data',
      name: 'data',
      component: Data,
      meta: {
        title: 'Data',
        icon: 'el-icon-upload'
      },
      children: [
        {
          path: '/data/table',
          name: 'table',
          component: Table,
          meta: {
            title: 'Table'
          }
        },
        {
          path: '/data/tag',
          name: 'tag',
          component: Tag,
          meta: {
            title: 'Tag'
          }
        }
      ]
    },
    {
      path: '/button',
      name: 'button',
      component: Button,
      meta: {
        title: 'Button',
        icon: 'el-icon-s-order'
      }
    },
    {
      path: '/tabs',
      name: 'tabs',
      component: Tabs,
      meta: {
        title: 'Tabs',
        icon: 'el-icon-s-ticket'
      }
    },
    {
      path: '/echarts',
      name: 'echarts',
      component: Echarts,
      meta: {
        title: 'Echarts',
        icon: 'el-icon-s-marketing'
      }
    }
  ]
});

export default router

App.vue：

<template>
  <el-container id="container">
    <el-header>
      <Header/>
    </el-header>

    <el-container>
      <el-aside width="210px" style="overflow:hidden;">
        <div style="height: 60px;"></div>

        <el-row class="tac">
          <el-col :span="12">
            <el-menu
              router
              style="width: 210px"
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b">

              <template v-for="route in this.$router.options.routes">

                  <el-submenu :index="route.path" v-if="route.children && route.children.length">
                    <template slot="title">
                      <i :class="route.meta.icon"></i>
                      <span>{{route.meta.title}}</span>
                    </template>
                    <el-menu-item-group>
                      <el-menu-item :key="todo.path" :index="todo.path" v-for="todo in route.children">{{todo.meta.title}}</el-menu-item>
                    </el-menu-item-group>
                  </el-submenu>

                  <el-menu-item :index="route.path" :key="route.path"  v-else-if="!route.children && route.path != '/'">
                    <i :class="route.meta.icon"></i>
                    <span>{{route.meta.title}}</span>
                  </el-menu-item>

              </template>

            </el-menu>
          </el-col>
        </el-row>

      </el-aside>

      <el-main id="main">
        <div id="mainIn">
          <router-view></router-view>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  export default {
    name: 'App',
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .margin-bottom-20{
    margin-bottom: 20px;
  }
</style>

<style scoped>
  #container{
    height: 100%;
  }
  .el-header{
    z-index: 100000000000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: #20a0ff;
    color: #333;
  }
  #main {
    position: absolute;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    background-color: #FFFFFF;
    color: #333;
    height: 100%;
    width: 100%;
  }
  #mainIn{
    padding: 0 20px 30px 230px;
    border-top: 80px solid #ffffff;
    height: 100%;
    box-sizing: border-box;
    overflow: auto;
  }
  .el-aside {
    background-color: #545c64;
    color: #333;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100000;
  }
  .el-aside a{
    color:#ffffff;
    text-decoration: none;
  }
  .el-aside a:link{
    color:#ffffff;
  }
  .el-aside a:hover{
    color:#ffffff;
  }
</style>

其中'<el-menu>'中的'router'是关键

Form.vue、Data.vue组件模板中需要添加'<router-view></router-view>'。