基于Vue生成动态路由树
创建MenuTree.vue文件
<template>
<div>
<template v-for="item in this.menuList">
<el-submenu
:index="item.menuId+''"
v-if="item.type==true"
:key="item.menuId+''"
:disabled="!item.available"
>
<template slot="title" style="padding-left: 10px">
<i :class="item.icon"></i>
<span slot="title">{{item.menuName}}</span>
</template>
<MenuTree :menuList="item.childMenus"></MenuTree>
</el-submenu>
<el-menu-item
v-else
:disabled="!item.available"
:index="item.url+''"
:route="item.url"
:key="item.menuId+''"
style="padding-left: 50px;"
@click="savePath(item.url)"
>
<i :class="item.icon"></i>
<span>{{item.menuName}}</span>
</el-menu-item>
</template>
</div>
</template>
在home.vue中引入MenuTree组件
<!-- 菜单 -->
<el-aside :width="isCollapse?'64px':'200px'">
<div class="toggle-btn" @click="toggleMenu">|||</div>
<el-menu
class="el-menu-vertical-demo"
:collapse="isCollapse"
:router="true"
:default-active="activePath"
background-color="#001529"
:collapse-transition="false"
text-color="rgba(255,255,255,0.7)"
unique-opened
>
<MenuTree :menuList="this.menuList"></MenuTree>
</el-menu>
</el-aside>
import MenuTree from "../components/MenuTree";
export default {
components: {
MenuTree,
},
}
async getMenuList() {
//获取头信息
let header = this.$store.state.userInfoVO.token;
menus(header).then((res) => {
if (res.code !== 200) {
return this.$message.error("获取菜单信息失败:" + res.message);
}
this.menuList = res.data;
});
},
后端实现:https://blog.csdn.net/weixin_42339552/article/details/108253829