vue2.x+element-ui实现动态菜单

实现思路

1. 路由设置：设置菜单相关的字段（权限、国际化的菜单名称、标记属于菜单部分的路由）
2. 菜单数据组装：由路由参数配置和菜单权限数据组合成一个头部菜单数组
3. 菜单渲染：利用element-ui和头部菜单数组，动态渲染菜单

一、路由设置（PS：放在编辑器好看一点）

/* 静态页面路由 */
/**
 * 1、功能一：动态渲染头部菜单
 * 1.1: 路由参数说明
 *      1.1.1：menuPermission（当前菜单显示需要的权限）
 *      1.1.2：subMenuType---当前路由的子路由命名（在login.vue组装数据时，用于筛选只属于头部主菜单的路由）
 *      1.1.3：title---当前路由的可“国际化”名称（menu.meeting等等）
 * 1.2：由路由参数配置和菜单权限数据组合成一个头部菜单数组
 * 1.3：利用element-ui动态渲染菜单
 * **/
const staticRouter = [
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/login/Login'),
    meta: {
      title: '登录',
      table: false
    }
  },
  // 菜单路由
  {
    path: '/layout',
    menu: true, // 菜单路由标识字段
    component: () => import('@/layouts/BasicLayout'),
    children: [
      // 会议
      {
        path: '/home',
        title: 'menu.meeting',
        label: '会议',
        component: () => import('@/views/schedule'),
        meta: {
          title: '会议',
          icon: 'el-icon-s-custom',
          menuPermission: 'schedule'
        }
      },
      // 运维
      {
        path: '',
        title: 'menu.maintenance',
        label: '运维',
        component: () => import('@/layouts/Index'),
        meta: {
          title: '运维',
          icon: 'el-icon-s-custom',
          menuPermission: 'monitor'
        },
        children: [
          {
            path: '/log',
            title: 'menu.log',
            label: '日志管理',
            component: () => import('@/views/system/systemSettings/LeftRightLayout'),
            meta: {
              title: '日志管理',
              // subMenuType 这个字段有值时，菜单数据组装时会忽略当前路由的子路由数据。
              // 在此处，组装菜单时，“操作日志”子路由会被忽略
              subMenuType: 'logger',
              menuPermission: 'logger'
            },
            children: [
              {
                path: '/log/operation-log',
                name: '操作日志',
                component: () => import('@/views/device/LogManagement/OperationLog'),
                meta: {
                  title: '操作日志',
                }
              }
            ]
          }
        ]
      }
    ]
  },
  // 非菜单路由
  {
    path: '/layout',
    component: () => import('@/layouts/BasicLayout'),
    children: [
      {
        path: '/personal/UserInfo',
        component: () => import('@/views/personal/UserInfo'),
        name: '个人信息',
        meta: {
        }
      }
    ]
  }
]

export default staticRouter

二、菜单数据组装（PS：放在编辑器好看一点）

在获取菜单权限后，静态路由数据根据菜单权限进行组装，见下面代码：
1、登录页面

import staticRouter from '@/router/staticRouter' // 引入静态路由
// ....略....
methods: {
  loginMethod () {
	// 登录成功后，根据静态router和当前用户权限来组装菜单列表
	     login({
		  username: 'xxx',
		  password: '****',
		}).then(res => {
		  if (res.status === 200) {
		    // 根据静态router和当前用户权限来组装菜单列表
		    that.mapMenuList(staticRouter, res.data.memuPermissions);
		  }
		}).catch(err => {
		  console.log(err);
		}).finally(() => {
		});
	},
	// 核心组装菜单方法---根据静态路由和当前用户菜单权限来组装头部菜单列表
    mapMenuList (staticRouter, permissions) {
      const that = this;
      const filterMenus = function (menus, accessMenu) {
        menus.forEach((m) => {
          // 主菜单组装
          if (m.children && !m.meta.subMenuType) {
            // 有子路由，且subMenuType没有值，说明该子路由属于子菜单
            let subMenu = [];
            // m.children说明当前路由还有子路由，继续递归
            filterMenus(m.children, subMenu);
            // 递归后，如果子路由组装后存在值，则将子路由的值合并到当前路由的children，并将当前路由push到最终accessMenu中
            if (subMenu.length > 0) {
              let _aMenu = Object.assign({}, m);
              _aMenu.children = subMenu;
              accessMenu.push(_aMenu)
            }
          } else {
            // 过滤子菜单（子路由不属于头部菜单时，需要进行过滤）
            if (m.meta.subMenuType) {
              m.children && delete m.children
            }
            // 递归遍历菜单，筛选有权限的菜单
            permissions.includes(m.meta.menuPermission) && accessMenu.push(m)
          }
        })
      };
      let menus = []; // 全部菜单路由
      let accessMenu = []; // 根据权限过滤后的菜单路由
      // 获取路由是菜单的部分
      staticRouter.forEach((item) => {
        if (item.menu) {
          // 菜单路由
          menus = item.menu ? menus.concat(item.children) : menus
        }
      });
      console.log('组装前--全部菜单路由', menus);
      // 根据当前用户菜单权限来组装菜单列表
      filterMenus(menus, accessMenu);
      // console.log('组装后最终的菜单', accessMenu);
      // 保存到vuex中
      that.$store.commit('setUser', accessMenu)
    }}

2、vuex页面

const state = {
  user: {
    accessMenu: []
  }
};
const mutations = {
  setUser (state, accessMenu) {
    state.user.accessMenu = accessMenu
  }
};
export default {
  namescaped: true,
  state,
  mutations
}

三、菜单渲染

1、菜单所在页面

<template>
  <el-menu :default-active="activeMenu"
           class="el-menu-demo"
           mode="horizontal"
           :router="true">
   <template v-for="menu in user.accessMenu">
      <el-menu-item class="sub-nav" v-if="!menu.children" :key="menu.title" :index="menu.path">
        <i :class="menu.icon" v-if="menu.icon"></i>
        <span slot="title">{{ $t(menu.title) }}</span>
      </el-menu-item>
      <the-submenu :key="menu.title" :subMenu="menu" v-else :i18n="i18n"></the-submenu>
    </template>
  </el-menu>
</template>

<script type="text/ecmascript-6">
import { mapState } from 'vuex';
import TheLayoutSubSidebar from './TheLayoutSubSidebar'

export default {
  name: 'Header',
  components: { 'theSubmenu': TheLayoutSubSidebar },
  computed: {
    ...mapState({
      user: state => state.common.user
    }),
    activeMenu () {
      const route = this.$route;
      const { meta, path } = route;
      if (meta.activeMenu) {
        return meta.activeMenu;
      }
      return path;
    }
    methods: {
	   i18n: function (key) {
	      return this.$t(key)
	    }
    }
  }
</script>

2、嵌套路由组件（TheLayoutSubSidebar页面）

<template functional>
  <el-submenu v-on="listeners" :key="data.key" :index="data.key">
    <template slot="title">
      <i :class="data.attrs.subMenu.icon" v-if="data.attrs.subMenu.icon"></i>
      <span slot="title">{{ data.attrs.i18n(data.attrs.subMenu.title) }}</span>
    </template>
    <template v-for="item in data.attrs.subMenu.children">
      <el-menu-item v-if="!item.children" :key="item.title" :index="item.path">
        <a-icon :type="item.icon" v-if="item.icon"/>
        <span>{{ data.attrs.i18n(item.title) }}</span>
      </el-menu-item>
      <the-submenu v-else :subMenu="item" :key="item.title" :i18n="data.attrs.i18n"></the-submenu>
    </template>
  </el-submenu>
</template>

学习大佬文章写的：https://github.com/linjinze999/vue-llplatform