vue-element-admin动态菜单,vue element admin 动态菜单
在权限管理系统中，菜单也属于权限控制的资源和角色控制的一部分。不同角色的用户登录系统后，会有不同的系统菜单。结合菜单路径集，实现了对可访问路径的过滤，以及相应角色菜单的显示和可访问路径的控制。
:
目录
1.菜单资源和管理界面介绍2。菜单和路由的组合管理
1、菜单资源及管理界面介绍
如前所述，权限管理通常涉及用户、组织、角色和权限功能。ABP框架的基本内容也涉及到这些方面，它们之间基本上是多对多的关系。它们的关系如下所示。
添加菜单资源，并整理它们的关系和表格信息，如下所示。
结合ABP后端提供的接口，Vue前端需要管理基本的用户、组织、角色、功能、权限，维护它们之间的关系。权限管理模块的Vue前端菜单列表如下所示。
菜单管理界面如下图所示，主要包括树形列表显示菜单结构和具体的菜单列表查询处理。
菜单视图详细界面如下图所示，主要是简单显示菜单相关的属性数据。
编辑或添加菜单界面时，需要考虑从现有菜单中选择列表和图标信息。
其中，我们封装了选择图标组件的牛逼图标，只从字体牛逼图标中选择。毕竟自带的元素图标太少，不符合要求。
的Web图标选择控件根据e-icon-picker控件进行了修改，以采用字体Awesome图标集合。
//Vue-牛逼图标自动加入。
const req=require . context( vue-awesome/icons ，true，/\。js$/)
const require all=require context=require context . keys()
const re=/\。\/(.*)\.js/
const font awesome=require all(req)。过滤器((键)={
返回key.indexOf(index.js) 0
}).地图(i={
return i.match(re)[1]
})
菜单显示我们也可以根据配置从Awesome中选择图标项来构建菜单。
在layout/components/sidebar/item . vue中修改了菜单项的组件，以适应牛逼图标的处理。
render(createElement，context) {
const { icon，title }=context .道具
const vnodes=[]
如果(图标){
//vnodes . push(svg-icon icon-class={ icon }/)//使用自定义SVG图标
//vnodes . push(I class={ icon }/)//使用内置元素图标
vnodes . push(v-icon name={ icon } scale= 1.1 style= padding-right:3px /)//使用牛逼图标
}
如果(标题){
vnodes . push(span slot= title { title)}/span
}
返回虚拟节点
}
通过在各个地方进行修改，我们可以使用牛逼的图标集合。
2、菜单和路由的结合管理
通过前端接口动态获取菜单列表，通过菜单名和路由名的对应关系，我们对比菜单集，然后过滤所有本地静态路由的列表，然后获取用户可以访问的路由列表，给前端设置动态路由，从而实现界面根据用户的不同角色/权限，改变用户的菜单界面和可访问的路由集。
菜单处理的一般操作流程如下。
前端动态菜单、本地路由、菜单导航和可访问路由的几个概念如下图所示。
在前端界面处理中，我们通过元素界面组件显示动态菜单信息，结合菜单与路由的关系，实现菜单跳转到相应视图的处理过程。
所以在系统管理中的菜单信息配置界面，菜单的网址对应的是系统的静态路由名称，如下图界面所示。
先前定义的系统的路由信息格式如下
//定义本系统的所有路由。具体路线通过菜单数据过滤呈现。
导出常量异步路由={
仪表板:{
路径：“/仪表板”，
组件：布局，
孩子：[{
路径：“仪表板”，
名称：“仪表板”，
组件：()=导入( @/视图/仪表板/索引)
}]
},
产品:
路径：“/产品”，
组件：布局，
孩子：[{
路径：“/产品”，
名称：产品，
组件：()=导入( @/视图/产品/索引)
}]
},
....//省略部分
图标:{
路径：“/icon”，
组件：布局，
孩子：[{
路径：“/icon”，
名称：“图标”，
component:()=import( @/views/icons/index )
}]
},
外部链接:{
路径： http://www.iqidi.com ，
名称：“外部链接”
}
}
有了这些准备，我们就可以在用户登录系统后，从后台获取相应的菜单列表。
在系统登录的过程中，考虑到初始化，如果用户是管理员admin，并且获取的用户菜单为空，可以考虑使用预置的静态菜单资源，让用户先配置权限菜单。
//系统静态菜单
var static menus=await getstatic menus()
//console.log(菜单)
//如果用户是admin，并且角色集中没有菜单，则使用静态菜单
Var用户名=store.getters.name//username
if(用户名===admin) {
如果(！menus type of(menus)== undefined menus . length===0){
Menus=staticmenus //系统管理员，初始化时使用静态菜单。
}
}
由于之前开发了一个基于Winform的ABP前端应用，为了整合两个应用，我们在菜单表示中增加了一个Tag标签，以区分Winform界面的菜单和Web的菜单。毕竟两个菜单处理方式不同。
AddForm: {//添加一个表单
id: this.guid()，
pid: ，
名称： ，
url: ，
序列：“001”，
isTop:假，
展开：1，
可见：1，
网页图标： ，
标签:“web”//特定于Web
},
WInform客户端的菜单也向服务器请求数据，并且是动态构造的。Winform客户端的菜单显示效果如下图所示。
以上是Vue元素前端应用开发中菜单资源管理的详细内容。更多关于Vue元素的菜单资源管理，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。