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

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

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

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

image.gif

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

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


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

拿用户管理来说,


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

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

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

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


相关文章
|
6月前
|
JavaScript
Ant designe vue中有关默认组件引入不生效的问题;
Ant designe vue中有关默认组件引入不生效的问题;
75 0
|
6月前
|
前端开发
Vue3/React 动态设置 ant-design/icons 图标
Vue3/React 动态设置 ant-design/icons 图标
414 1
|
6月前
|
JavaScript 前端开发
Ant Design Vue 从V3到V4的升级原来进行了这个技术的调整
Ant Design Vue 从V3到V4的升级原来进行了这个技术的调整,你有了解吗?
454 0
|
6月前
|
JavaScript
Vite 按需引入 Ant Design Vue 3.0
Vite 按需引入 Ant Design Vue 3.0
|
6月前
|
JavaScript
vue2_引入Ant design vue
vue2_引入Ant design vue
190 0
|
12月前
|
资源调度 JavaScript 前端开发
Ant Design Vue 使用-引入 ant-design-vue并且使用
Ant Design Vue 使用-引入 ant-design-vue并且使用
635 1
|
前端开发 JavaScript 数据安全/隐私保护
react中ant.design框架配置动态路由
react中ant.design框架配置动态路由
213 0
|
设计模式 移动开发 前端开发
前端组件之Bootstrap与Ant design of Vue
前端组件之Bootstrap与Ant design of Vue
413 0
|
资源调度 前端开发 JavaScript
ant-design-vue+vite主题切换详细步骤(简单案例)
ant-design-vue+vite主题切换详细步骤(简单案例)
871 0
|
开发框架 JavaScript 前端开发
SpringBoot + Ant Design Pro Vue实现动态路由和菜单的前后端分离框架
Ant Design Pro Vue默认路由和菜单配置是采用中心化的方式,在 router.config.js统一配置和管理,同时也提供了动态获取路由和菜单的解决方案,并将在2.0.3版本中提供,因到目前为止,官方发布的版本为2.0.2,所以本文结合官方提供的解决方案结合SpringBoot后台权限管理进行修改,搭建一套完整的SpringBoot +Vue前后端分离框架。
1039 0