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

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

vue项目实现动态路由的方式大体可分为两种:

1.前端这边把路由写好,登录的时候根据用户的角色权限来动态展示路由,(前端控制路由)

image.png

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

image.png

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

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

image.png

父级节点 父级

节点ID 自动生成

菜单名称 菜单名称

权限标识

图标 菜单前面的图标

类型 分为菜单和按钮

排序

前端组件 组件在项目中的位置

前端地址 浏览器路由地址

拿用户管理来说,

image.png

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

image.png

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

image.png

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

image.png

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

相关文章
|
18天前
|
JavaScript 应用服务中间件 nginx
vue项目中页面遇到404报错
vue项目中页面遇到404报错
|
18天前
|
JavaScript
vue路由导航守卫(全局守卫、路由独享守卫、组件内守卫)
vue路由导航守卫(全局守卫、路由独享守卫、组件内守卫)
34 0
|
18天前
|
JavaScript
Vue项目中强制刷新页面的方法
Vue项目中强制刷新页面的方法
14 0
|
1月前
|
JavaScript 前端开发 网络架构
Vue3项目中使用vue-router
Vue3项目中使用vue-router
44 0
|
1天前
|
缓存 JavaScript 前端开发
Vue.js 路由时用于提高应用程序性能
Vue.js 路由时用于提高应用程序性能
|
1天前
|
资源调度 JavaScript 前端开发
Vue的路由管理:VueRouter的配置和使用
【4月更文挑战第24天】VueRouter是Vue.js的官方路由管理器,用于在单页面应用中管理URL路径与组件的映射。通过安装并引入VueRouter,设置路由规则和创建router实例,可以实现不同路径下显示不同组件。主要组件包括:`<router-link>`用于创建导航链接,`<router-view>`负责渲染当前路由对应的组件。此外,VueRouter还支持编程式导航和各种高级特性,如嵌套路由、路由参数和守卫,以应对复杂路由场景。
|
2天前
|
缓存 JavaScript
【vue】如何搭建拦截器和设置路由守卫(基于token认证)
【vue】如何搭建拦截器和设置路由守卫(基于token认证)
15 0
|
2天前
|
JavaScript
Vue 如何新建一个项目(如何安装依赖)
Vue 如何新建一个项目(如何安装依赖)
9 0
|
9天前
|
JavaScript
vue3+vite项目配置ESlint
vue3+vite项目配置ESlint
12 0
|
9天前
|
JavaScript
Vue项目使用bpmn预览流程图
Vue项目使用bpmn预览流程图
10 0