Vue 动态添加路由及生成菜单
【摘要】
写管理后台的都会遇到这个这种需求，管理员登录后台需要看到所有功能，普通的公司管理员或部门管理员登录只能看到部分功能权限
不同角色有不同的权限，这时如果管理平台的菜单定义在代码里，显然是不能满足上面的需求，我们就需要后台提供用户菜单，然后前台动态生成路由。
1 动态添加路由
利用 vue-router 的 addRo...
写管理后台的都会遇到这个这种需求，管理员登录后台需要看到所有功能，普通的公司管理员或部门管理员登录只能看到部分功能权限
不同角色有不同的权限，这时如果管理平台的菜单定义在代码里，显然是不能满足上面的需求，我们就需要后台提供用户菜单，然后前台动态生成路由。
1 动态添加路由
利用 vue-router 的 addRoutes 方法可以动态添加路由。请求接口返回菜单格式如下
-
[
-
{
-
"id":"1332194352530083842",
-
"pid":"1331859957655007233",
-
"name":"TspUser",
-
"component":"user/tspuser/index",
-
"redirect":null,
-
"meta":{
-
"title":"用户信息 ",
-
"icon":"pic-right",
-
"show":true,
-
"target":null,
-
"link":null
-
},
-
"path":"/user",
-
"hidden":false
-
},
-
{
-
"id":"1334396728339042306",
-
"pid":"1333592942347546625",
-
"name":"Product",
-
"component":"fota/product/index",
-
"redirect":null,
-
"meta":{
-
"title":"产品信息",
-
"icon":"pic-right",
-
"show":true,
-
"target":null,
-
"link":null
-
},
-
"path":"/product",
-
"hidden":false
-
}
-
]
path是地址栏显示路径，component是这个菜单对应的文件地址。这里返回的结构并没有按照树型返回，都是平级，所以前台需要重新梳理关系。定义一个方法
-
routerPackag(routers) {
-
let accessedRouters = routers.filter(router => {
-
if (router.component === "Layout") {
-
// Layout组件特殊处理
-
router.component = Layout;
-
} else {
-
//处理组件---重点
-
router.component = this.loadView(router.component);
-
}
-
//存在子集
-
if (router.children && router.children.length) {
-
router.children = this.routerPackag(router.children);
-
}
-
return true;
-
});
-
return accessedRouters;
-
},
-
loadView(view) {
-
// 路由懒加载
-
return () => import(`@/${view}`);
-
},
这个方法就是把平级的处理成正确的父子级，同时路由懒加载。
2 生成菜单
后台提供的菜单数据需要前台身体生成菜单树。
-
<a-layout-sider
-
:class="themeStyle == 'light'?'rightbg':'darkbg'"
-
:trigger="null"
-
collapsible
-
v-model="collapsed"
-
>
-
<div :class="themeStyle == 'light'?'rightlogo':'darklogo'">
-
<img class="l-logo" v-show="collapsed" src="../assets/logo.png" a
-
<span v-show="!collapsed">管理平台</span>
-
</div>
-
<a-menu
-
mode="inline"
-
:theme="themeStyle"
-
:openKeys="openKeys"
-
@click="selectItem"
-
:selectedKeys="[$route.path]"
-
@openChange="onOpenChange"
-
>
-
<a-sub-menu v-for="item in menu" :key="item.id">
-
<span slot="title">
-
<i class="iconfont" :class="item.icon"></i>
-
<span v-show="!collapsed">
-
{{lang == "cn"
-
? item.name
-
: lang == "en"
-
? item.nameEnUS
-
: lang == "tw"
-
? item.nameZhTW
-
: item.nameJA}}
-
</span>
-
</span>
-
<a-menu-item
-
v-for="childrenitem in item.children"
-
:key="childrenitem.showPath"
-
@click="titleClick(item,childrenitem)"
-
>
-
<i class="iconfont" :class="childrenitem.icon"></i>
-
<span>
-
{{lang == "cn"
-
? childrenitem.name
-
: lang == "en"
-
? childrenitem.nameEnUS
-
: lang == "tw"
-
? childrenitem.nameZhTW
-
: childrenitem.nameJA}}
-
</span>
-
</a-menu-item>
-
</a-sub-menu>
-
</a-menu>
-
</a-layout-sider>
上述功能已经在开源的管理平台实现，地址如下， 有兴趣的可以clone。
https://gitee.com/nmgwap/vue-antd
文章来源: blog.csdn.net，作者：NMGWAP，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/NMGWAP/article/details/125066834
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）