vue实例：element-ui导航栏通过vue-router配置多级导航菜单

  {
    path:'/home',
    component:Home,
    name:'导航一',
    iconCls: 'el-icon-menu',
    children: [
      { path: '/table', component: table, name: '表格'},
      { path: '/carousel', component: elCarousel, name: '走马灯' },
      { path: '/datepicker', component:elDatePicker, name: '时间选择' },
      { path: '/other', component:other , name: '其他' },
    ]
  },

路由配置如上时，子路由匹配到“/table”时组件能加载出来，而不是匹配“/home/table”;

这是因为vue-router中嵌套路径以“/”开头时将被当做根路径；

  {
    path:'/home',
    component:Home,
    name:'导航一',
    iconCls: 'el-icon-menu',
    children: [
      { path: 'table', component: table, name: '表格'},
    ]
  },

配置如上时，则子路由匹配“/home/table”时加载组件；

在配合elementUI组件导航栏进行路由跳转时，注意路由参数设置：el-menu-item 的 index参数决定点击时跳转的路径！

以下设置，点击导航栏才会跳转到“/home/table”。

<el-menu :default-active="$route.path"  router unique-opened >
    <template v-for="(item,index) in $router.options.routes">
          <el-submenu  :index="index+''" v-show="item.name">
            <template slot="title">
              <i :class="item.iconCls"></i>{{item.name}}
            </template>
            <el-menu-item v-for="child in item.children"  :index="'/home/'+child.path"  :key="child.path" >
                 {{child.name}}
            </el-menu-item>
          </el-submenu>
    </template>
</el-menu>

完整示例：

路由文件router.js：

import Vue from 'vue'
import Router from 'vue-router'
const Home = () => import('@/components/HelloWorld')
const Badge = () => import('@/components/Badge')
const Progress = () => import('@/components/Progress')
const Table = () => import('@/components/Table')
const Tag = () => import('@/components/Tag')
const Chart = () => import('@/components/Chart')
const NotFound = () => import('@/components/NotFound')
const Login = () => import('@/components/Login')
const Tabs = () => import('@/components/Tabs')
const Rate = () => import('@/components/Rate')

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: Home,
      name: 'Home',
      iconCls: 'fa fa-address-card',
      leaf: true,//只有一个节点
      children: [
          { 
            path: '/index', 
            component: Home, 
            name: '首页', 
            iconCls: 'el-icon-star-on'
          }
      ]
    },
    {
      path: '/',
      component: Home,
      name: '导航一',
      iconCls: 'el-icon-s-flag',
      leaf: false,
      children: [
          { path: '/tabs', component: Tabs, name: 'Tabs', iconCls: 'el-icon-star-on'},
          { path: '/rate', component: Rate, name: 'Rate', iconCls: 'el-icon-star-on'}
      ]
    },
    {
      path: '/',
      component: Home,
      name: 'Home',
      iconCls: 'fa fa-address-card',
      leaf: true,//只有一个节点
      children: [
          { 
            path: '/badge', 
            component: Badge, 
            name: 'Badge', 
            iconCls: 'el-icon-s-help'
          }
      ]
    },
    {
      path: '/',
      component: Home,
      name: 'Home',
      iconCls: 'fa fa-address-card',
      leaf: true,//只有一个节点
      children: [
          { 
            path: '/table', 
            component: Table, 
            name: 'Table', 
            iconCls: 'el-icon-upload'
          }
      ]
    },
    {
      path: '/',
      component: Home,
      name: 'Home',
      iconCls: 'fa fa-address-card',
      leaf: true,//只有一个节点
      children: [
          { 
            path: '/tag', 
            component: Tag, 
            name: 'Tag', 
            iconCls: 'el-icon-s-cooperation'
          }
      ]
    },
    {
      path: '/',
      component: Home,
      name: 'Home',
      iconCls: 'fa fa-address-card',
      leaf: true,//只有一个节点
      children: [
          { 
            path: '/progress', 
            component: Progress, 
            name: 'Progress', 
            iconCls: 'el-icon-s-order'
          }
      ]
    },
    {
      path: '/',
      component: Home,
      name: 'Home',
      iconCls: 'fa fa-address-card',
      leaf: true,//只有一个节点
      children: [
          { 
            path: '/chart', 
            component: Chart, 
            name: 'Chart', 
            iconCls: 'el-icon-s-flag'
          }
      ]
    },
    {
      path: '/login',
      name: 'Login',
      component: Login,
      hidden: true
    },
    {
      path: '*',
      hidden: true,
      redirect: { path: '/404' }
    },
    {
      path: '/404',
      hidden: true,
      name: '',
      component: NotFound
    }
  ]
})

首页：HelloWorld.vue：

<template>
  <div class="hello">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

其中的“<router-view></router-view>”不能缺少。

App.vue：

<template>
  <div id="app">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">
            <el-row class="tac">
              <el-col :span="24">
                <el-menu
                  :default-active="$route.path"
                  router unique-opened
                  class="el-menu-vertical-demo"
                  @open="handleOpen"
                  @close="handleClose">

                  <template v-for="(item, index) in $router.options.routes" v-if="!item.hidden">
                      <!--二级菜单-->
                      <template v-if="!item.leaf" >
                          <el-submenu :index="index+''">
                            <template slot="title">
                              <i :class="item.iconCls"></i>
                              <span>{{item.name}}</span>
                            </template>
                            <el-menu-item-group>
                              <el-menu-item :index="child.path" :key="index" v-for="(child, index) in item.children">
                                {{child.name}}
                              </el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                      </template>

                      <!--一级菜单-->
                      <template v-else>
                          <el-menu-item :index="child.path" :key="index" v-for="(child, index) in item.children">
                            <i :class="child.iconCls"></i>
                            <span slot="title">{{child.name}}</span>
                          </el-menu-item>
                      </template>
                      <!-- <subMenu v-else :data="item" :key="key"></subMenu> -->
                  </template>

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

        <el-main>
          <el-row>
            <el-col :span="24">
              <div class="grid-content" style="padding: 20px;">
                <router-view/>
              </div>
            </el-col>
          </el-row>

        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

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

<style>
body{
  margin: 0;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.el-header, .el-footer {
  background-color: #235d8b;
  color: #ffffff;
  text-align: left;
  line-height: 60px;
  position: absolute;
  top: 0;
  left: 0;
  height: 60px;
  width: 100%;
  z-index: 100;
}

.el-aside {
  background-color: #4175a4;
  color: #ffffff;
  text-align: left;
  height: 100%;
  z-index: 10;
  position: absolute;
  left: 0;
  top: 0;
  padding-top: 80px;
}

.el-main {
  background-color: #FFFFFF;
  color: #333;
  text-align: left;
  height: 100%;
  position: absolute;
  left: 0; 
  top: 0;
  padding-top: 80px;
  padding-left: 210px;
  width: 100%;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.el-menu-vertical-demo{
  background:#4175a4;
}
</style>