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”。

完整示例：

路由文件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：

其中的“”不能缺少。

App.vue：