人事管理项目-动态加载用户菜单3

简介: 人事管理项目-动态加载用户菜单3

代码解释:

• 在计算属性中返回routes数据。明这次跳转是正常的跳转,而不是用户按F5键或者直接在地址栏输入某个地址进入的,这时直接返回,不必执行菜单初始化。

• 若store中不存在菜单数据,则需要初始化菜单数据,通过getRequest(“/config/sysmenu”)方法获得菜单JSON数据之后,首先通过formatRoutes方法将服务器返回的JSON转为router需要的格式,这里主要是转component,因为服务端返回的component是一个字符串,而router中需要的却是一个组件,因此我们在formatRoutes方法中根据服务端返回的component动态加载需要的组件即可。

• 数据格式准备成功之后,一方面将数据存到store中,另一方面利用路由中的addRoutes方法将之动态添加到路由中。

加载到路由数据之后,接下来就是菜单渲染了。菜单渲染操作在Home.vue组件中完成,部分核心代码如下:

代码解释:

• 在计算属性中返回routes数据。

• 遍历routes中的数据,根据routes中的数据渲染出el-submenu和el-menu-item。

配置完成后,启动前端项目,使用不同的身份登录,登录成功后,就可以看到不同用户对应不同的操作菜单了。图16-15所示是系统管理员看到的菜单数据。图16-16所示是用户曾巩看到的菜单数据。

动态加载用户菜单就完全实现了,完整代码可以在https://github.com/lenve/vhr下载。


相关文章
|
算法 前端开发 容器
OA项目之左侧菜单&动态选项卡(一)
OA项目之左侧菜单&动态选项卡
|
数据库
会议OA必备!解密Layui神技:轻松构建动态可控的左侧权限菜单列表!
会议OA必备!解密Layui神技:轻松构建动态可控的左侧权限菜单列表!
95 0
|
小程序 NoSQL JavaScript
【易售小程序项目】”我的“界面实现+“信息修改“界面实现+登出账号实现+图片上传组件【基于若依管理系统开发】
【易售小程序项目】”我的“界面实现+“信息修改“界面实现+登出账号实现+图片上传组件【基于若依管理系统开发】
115 0
会议OA项目-其它页面->自定义组件应用,其它界面的布局
会议OA项目-其它页面->自定义组件应用,其它界面的布局
46 0
|
JSON 小程序 前端开发
小程序搭建OA项目首页布局界面
小程序搭建OA项目首页布局界面
102 0
|
小程序 前端开发
【易售小程序项目】修改“我的”界面前端实现;查看、重新编辑、下架自己发布的商品【后端基于若依管理系统开发】
【易售小程序项目】修改“我的”界面前端实现;查看、重新编辑、下架自己发布的商品【后端基于若依管理系统开发】
100 0
|
JSON JavaScript 前端开发
人事管理项目-动态加载用户菜单2
人事管理项目-动态加载用户菜单2
|
SQL Java Spring
人事管理项目-动态加载用户菜单
人事管理项目-动态加载用户菜单