VueRouter配合Element ui实现导航菜单

1.创建路由

import Vue from 'vue'
import Router from 'vue-router'  // 引入vue-router
import Layout from '../components/Layout/index.vue'

Vue.use(Router)  // 在vue中注入Router
 // 配置路由路径
const routes =[
    {
      path: '/login',
      name: 'login',
      hidden:false,//判断是否显示在导航区
      meta: {
        title: "登录"
      },
      component:() => import('@/views/login/index.vue'),
    },
    {
      path: '/',
      redirect:'/menu',
      hidden:false,
    },
    
    // 导航菜单
    {
      path: '/menu',
      name: 'menu',
      redirect:'/menu/home',
      hidden:true,
      meta: {
        title: "导航"
      },
      component:Layout,
      children:[
        {
          path: 'home',
          name: 'home',
          hidden:true,
          meta: {
            title: "首页"
          },
          component:() => import('@/views/home/index.vue'),
        },
        {
          path: 'page',
          name: 'page',
          hidden:true,
          meta: {
            title: "测试菜单"
          },
          component:() => import('@/views/test/index.vue'),
          children:[
            {
              path: 'pages',
              hidden:true,
              meta: {
                title: "首页"
              },
              component:() => import('@/views/test/index.vue'),
            },
            {
              path: 'test2',
              name: 'test2',
              hidden:true,
              meta: {
                title: "测试2"
              },
              component:() => import('@/views/modular/page/index.vue'),
            }

          ]
        },
      ]
    },  
     
]
// 将路径注入到Router中
var router=new Router({
  'mode': 'hash',
  routes
})
// 导出路由
export default router;

2.导航菜单
先拿到路由对象routerData

getRouter(){
      for (let i = 0; i < this.$router.options.routes.length; i++) {
        if(this.$router.options.routes[i].path == '/menu'){
          this.routerData=this.$router.options.routes[i].children;
        }        
      }
      // this.routerData=this.$router.options.routes[2].children;
    },

  <el-menu
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="rgb(30 34 45)"
      text-color="#fff"
      router
      active-text-color="#ffd04b"
    >
    <!-- 单 一级 -->
    <div v-for="(item,index) in routerData" :key="index+''">
      <!-- 判断没有子级并且hidden为展示状态 -->
       <el-menu-item  v-if="item.hidden && !item.children" :index="'/menu'+'/'+item.path"> 
        <i class="el-icon-menu"></i>
        <span slot="title">{{item.meta.title}}</span>
      </el-menu-item>
    </div>
    <!-- 嵌套路由 一级 -->
    <div v-for="(item,index) in routerData" :key="index+ '-onl'">
      <!-- 判断有子级并且hidden为展示状态 -->
      <el-submenu   v-if="item.hidden && item.children" :index="item.path">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>{{item.meta.title}}</span>
        </template>
        <!-- 二级 -->
        <div v-for="(its,indexs) in item.children" :key="indexs+ '-on'">
          <el-menu-item  v-if="its.hidden && !its.children" :index="'/menu'+'/'+item.path+'/'+its.path"> 
            <span slot="title">{{its.meta.title}}</span>
          </el-menu-item>
        </div>

      </el-submenu>
    </div>
      
      
    </el-menu>

效果展示