0
点赞
收藏
分享

微信扫一扫

Ant-design-vue项目实现动态路由

vue项目实现动态路由的方式大体可分为两种:
1.前端这边把路由写好,登录的时候根据用户的角色权限来动态展示路由,(前端控制路由)

Ant-design-vue项目实现动态路由_python

2.后台传来当前用户对应权限的路由表,前端通过调接口拿到路由信息后处理(后端处理路由)

Ant-design-vue项目实现动态路由_js_02

这两种方法各有优点,效果都能实现,我们公司现在用的就是第二种,后台返回路由信息,前端动态生成路由及菜单。我们就讲讲实现的逻辑。

我们用动态路由,需要后台提供路由信息,那前台肯定有对应编辑输入的地方,我们的系统放到菜单里。

Ant-design-vue项目实现动态路由_javascript_03

父级节点        父级
节点ID          自动生成
菜单名称        菜单名称
权限标识        
图标            菜单前面的图标
类型            分为菜单和按钮
排序                
前端组件        组件在项目中的位置
前端地址        浏览器路由地址

拿用户管理来说,

Ant-design-vue项目实现动态路由_java_04

前端组件views/admin/user/index对应我们项目中的

Ant-design-vue项目实现动态路由_vue_05

左侧菜单调用调用接口请求菜单数据返回格式

Ant-design-vue项目实现动态路由_javascript_06

在index.vue中,调用菜单接口,处理接口返回数据,重点在红圈内

Ant-design-vue项目实现动态路由_javascript_07

总结,菜单返回的信息要包含router信息,这个信息不能直接使用,需要重新封装路由,用router.addRoutes(asyncRouters)把路由信息重新添加。



举报

相关推荐

0 条评论