vue+element UI (组件递归) 实现多级导航菜单

创建 menus.vue 子组件(递归组件)

<template>
  <div>
    <template v-for="item in routerList">
      <el-submenu v-if="item.hasOwnProperty('children')&&item.children.length>0" :key="item.path" :index="item.path">
        <template slot="title" style="padding-left:10px">
          <i class="el-icon-menu"></i>
          <span slot="title">{{ item.name}}</span>
        </template>
        <!--  如果有子级数据使用递归组件 -->
        <Menu :routerList="item.children"></Menu>
      </el-submenu>
      <el-menu-item v-else :index="item.path" :key="item.path">
        <i :class="item.icon"></i>
        <span>{{item.name}}</span>
      </el-menu-item>
    </template>
  </div>
</template>

<script>
export default {
  props: ['routerList'],
  name: 'Menu',//模板名称
  created () {
    console.log(this.routerList, 'routerList')
  },
}
</script><style  lang="scss">
.el-menu--collapse span,
.el-menu--collapse i.el-submenu__icon-arrow {
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  display: inline-block;
}
</style>

父组件 index.vue

<!--
 * @Author: your name
 * @Date: 2020-08-13 09:01:24
 * @LastEditTime: 2020-08-13 10:47:23
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \admin\src\components\Menu\index.vue
-->
<template>
  <!--  背景颜色：此备注说明用，实际开发需要删除，否则报错 -->
  <!-- 字体颜色：此备注说明用，实际开发需要删除，否则报错 -->
  <!-- 只打开一个菜单：此备注说明用，实际开发需要删除，否则报错 -->
  <div>
    <div class="tools" @click="toggleClick">
      <i :class="icon"></i>
    </div>
    <el-menu router class="el-menu-vertical-demo" :collapse="isCollapse" background-color="rgb(73, 80, 96)" text-color="rgba(255,255,255,0.7)" unique-opened>
      <Menu :routerList="routers"></Menu>
    </el-menu>
  </div>
</template>



<script>
import Menu from './menus'; //引进菜单模板
export default {
  data () {
    return {
      isCollapse: false,//菜单展开功能
      unCollapse: {
        width: '220px'
      },
      collapse: {
        width: '50px'
      },
      unCollapseMain: {
        paddingLeft: '220px'
      },
      collapseMain: {
        paddingLeft: '50px'
      },
    };
  },
  components: {
    Menu
  },
  computed: {
    routers () {
      return this.$router.options.routes[2].children
    },
    icon: function () {
      return this.isCollapse ? 'el-icon-right' : 'el-icon-back'
    }
  },
  methods: {
    toggleClick () {
      this.isCollapse = !this.isCollapse
    },
  }
}
</script>

<style  lang="scss">
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.tools {
  cursor: pointer;
  text-align: center;
  font-size: 20px;
  height: 30px;
  line-height: 30px;
  color: pink;
  background-color: rgb(24, 9, 78);
}
</style>

router.js

import Vue from 'vue'
import Router from 'vue-router'

import layout from '../pages/layout/index'

Vue.use(Router)
const constantRouter = [
  {
    path: '/',
    redirect: () => {
      return '/login'
    }
  },
  {
    path: '/login',
    component: resolve => require(['../pages/login/Login'], resolve),
    meta: {
      role: ['admin', 'super_editor']
    }
  },
  {
    path: '/layout',
    // name: '首页',
    component: layout,
    children: [
      {
        path: '/mall',
        name: '管理端',
        icon: 'el-icon-goods',
        keepalive: true,
        component: () => import('../pages/layout/appMain'),
        // redirect: '/mall-list',
        children: [
          {
            path: '/forms',
            name: '表格数据',
            icon: 'el-icon-goods',
            keepalive: true,
            // redirect: '/three-1',
            component: () => import('../pages/mall/forms')
          },
          {
            path: '/mall-list2',
            name: '初选管理',
            icon: 'el-icon-goods',
            // redirect: '/three-1',
            component: () => import('../pages/mall/catalogue')
          },
          {
            path: '/commodity',
            name: '商品',
            icon: 'el-icon-goods',
            // redirect: '/three-1',
            component: () => import('../pages/mall/commodity')
          },
          {
            path: '/treeview',
            name: '树形控件',
            icon: 'el-icon-service',
            component: () => import('../pages/mall/treeview')
          },
          {
            path: '/tree',
            name: '树形控件2',
            icon: 'el-icon-service',
            component: () => import('../pages/mall/tree'),
            children: [
              {
                path: '/three-1',
                name: '三级级菜单-1',
                component: () => import('../pages/mall/catalogue'),
                children: [
                  {
                    path: '/fore-1',
                    name: '四级级菜单-1',
                    component: () => import('../pages/asideBar/fore')
                  },
                  {
                    path: '/fore-2',
                    name: '四级级菜单-2',
                    component: () => import('../pages/asideBar/fore2')
                  }
                ]
              }
            ]
          },
          {
            path: '/subassembly',
            name: '组件传值',
            icon: 'el-icon-service',
            component: () => import('../pages/mall/subassembly')
          }
        ]
      },
      {
        path: '/one-2',
        name: '富文本编辑',
        icon: 'el-icon-service',
        component: () => import('../pages/login/Login'),
        children: [
          {
            name: '二级菜单-2',
            icon: 'el-icon-service',
            path: '/one-3',
            component: () => import('../pages/login/Login')
          }
        ]
      }
    ]
  }
]

// const asyncRouter = [
//   {
//     path: '/asyncRouter',
//     name: 'asyncRouter',
//     component: ()=> import( '../pages/asyncRouter' )
//   }
// ]

export default new Router({
  mode: 'history', // 用这个模式可以把#号去掉
  routes: constantRouter
})

效果

项目地址

github.com/365392777/v…