<template>
|
<div>
|
<el-menu
|
:default-active="$route.path"
|
:unique-opened="true"
|
class="el-menu-vertical-demo"
|
>
|
<MenuItem
|
v-for="(route, index) in routersList"
|
:key="index"
|
:item="route"
|
:fatherPath="route.path"
|
></MenuItem>
|
</el-menu>
|
</div>
|
</template>
|
|
<script>
|
import routers from "../../../router";
|
import MenuItem from "./MenuItem.vue";
|
import { mapState } from "vuex";
|
|
// 递归过滤菜单
|
function filterMenusByPrivilege(menus, flatMenus) {
|
return menus
|
.filter(menu => {
|
// 没有 privilege 字段的菜单默认显示，有 privilege 字段的要判断权限
|
if (menu.meta && menu.meta.privilege) {
|
return flatMenus.includes(menu.meta.privilege);
|
}
|
return true;
|
})
|
.map(menu => {
|
// 递归处理 children
|
if (menu.children && menu.children.length > 0) {
|
return {
|
...menu,
|
children: filterMenusByPrivilege(menu.children, flatMenus)
|
};
|
}
|
return menu;
|
})
|
.filter(menu => {
|
// 过滤掉 children 为空的父级菜单
|
if (menu.children && menu.children.length === 0) {
|
return false;
|
}
|
return true;
|
});
|
}
|
export default {
|
components: {
|
MenuItem,
|
},
|
computed: {
|
...mapState(["flatMenus"]),
|
},
|
data() {
|
return {
|
routersList: [],
|
};
|
},
|
mounted() {
|
// 获取所有定义的一级菜单和多级菜单
|
// 过滤掉登录路由和重定向路由，只获取主布局下的路由
|
const allMenus = routers.options.routes.filter(route =>
|
route.path !== '/login' &&
|
route.path !== '/' &&
|
!route.meta?.hide
|
);
|
// 权限过滤
|
this.routersList = filterMenusByPrivilege(allMenus, this.flatMenus);
|
},
|
};
|
</script>
|
