vue+element 实现动态菜单！
文章目录
前言
后台管理项目，希望根据登录人权限的不同，配置不同的菜单导航
一、实现思路
主要是利用element-ui中 el-menu 组件 + 递归实现
二、使用步骤
1. el-menu导航
<template>
<el-menu :default-active="$route.fullPath" router mode="horizontal"
class="layout-menu"
text-color="rgba(255,255,255,0.7)"
active-text-color="#ffd04b" >
<el-menu-item index="/home">首页</el-menu-item>
<template v-for="items in menuRoutes">
<!--有子级菜单-->
<el-submenu :key="items.id" :index="items.id+''"
v-if="items.children && items.children.length > 0">
<template slot="title">
<span>{{ items.title }}</span>
</template>
<!-- 循环调用 递归组件--> <!--MenuTrees为封装的子组件-->
<MenuTree :menuList="items.children"></MenuTree>
</el-submenu>
<!--无子级菜单-->
<el-menu-item v-else :index="items.path+''" :key="items.id">
{{ items.title }}
</el-menu-item>
</template>
</el-menu>
</template>
//引入递归组件
import MenuTree from '@/components/MenuTree.vue';
<script>
export default {
data() {
return {
menuRoutes: [] //菜单导航数据
}
},
mounted() {
//查询动态菜单数据
this.queryDynamicMenu();
},
methods() {
//查询动态菜单数据
queryDynamicMenu() {
//查询缓存是否有存入的导航数据，没有从后台取出，有直接取缓存；
if(localStorage.getItem('menuList') == null) {
this.getMenu(); //从后台取菜单数据
}else {
let getMenu = localStorage.getItem('menuList');
this.menuRoutes = JSON.parse(getMenu);
}
},
//从后台获取导航数据
getMenu() {
ajax({
url: "/admin/menu/selectAllMenu",
type: "POST",
params: {}
}).then(response => {
if (response.data.code == 0) {
this.menuRoutes = response.data.resultData;
localStorage.setItem('menuList',JSON.stringify(response.data.resultData));
}
});
}
}
}
</script>
2.递归组件
代码如下（示例）：
<template>
<div>
<template v-for="items in menuList">
<!--有子级菜单-->
<el-submenu :key="items.id" :index="items.id+''" v-if="items.children && items.children.length > 0">
<template slot="title">
<span>{{ items.title }}</span>
</template>
<!-- 循环调用 递归-->
<MenuTree :menuList="items.children" @clickMenu="clickMenu"></MenuTree>
</el-submenu>
<!--无子级菜单-->
<el-menu-item v-else :index="items.path+''" :key="items.id" @click="clickMenu(items)">
{{ items.title }}
</el-menu-item>
</template>
</div>
</template>
<script>
export default{
name:'MenuTree', //组件名称
props:{
//接受父级组件传过来的导航数据
menuList:{
type:Array,
default:()=>[]
}
},
methods: {
//点击没有子组件的导航，直接返回该导航
clickMenu(obj){
this.$emit('clickMenu',obj)
}
},
}
</script>
