vue项目实现动态路由的方式大体可分为两种:
1.前端这边把路由写好,登录的时候根据用户的角色权限来动态展示路由,(前端控制路由)
![b84fb8b008aef1d718f71bb77919e067.png](https://i-blog.csdnimg.cn/blog_migrate/37f65d630830ed1ef335846aa66f872e.jpeg)
2.后台传来当前用户对应权限的路由表,前端通过调接口拿到路由信息后处理(后端处理路由)
![a15db2b54c8f0753cd51d2fa280bcc7d.png](https://i-blog.csdnimg.cn/blog_migrate/4a921a913999717fb777225a96ac18ac.jpeg)
这两种方法各有优点,效果都能实现,我们公司现在用的就是第二种,后台返回路由信息,前端动态生成路由及菜单。我们就讲讲实现的逻辑。
我们用动态路由,需要后台提供路由信息,那前台肯定有对应编辑输入的地方,我们的系统放到菜单里。
![4654a85f691b91a98cdd427624ce3c21.png](https://i-blog.csdnimg.cn/blog_migrate/d8d924b3c968ba5acd19e53d80a86549.jpeg)
父级节点 父级
节点ID 自动生成
菜单名称 菜单名称
权限标识
图标 菜单前面的图标
类型 分为菜单和按钮
排序
前端组件 组件在项目中的位置
前端地址 浏览器路由地址
拿用户管理来说,
![8dc405980e50ff0dac7c105816bc62bf.png](https://i-blog.csdnimg.cn/blog_migrate/6b34c923153ce937745f6b883a06f0a6.jpeg)
前端组件views/admin/user/index对应我们项目中的
![0f856078cd4f6eb5f5bc593439777064.png](https://i-blog.csdnimg.cn/blog_migrate/c4b7fa20d656afd8467504193d775207.jpeg)
左侧菜单调用调用接口请求菜单数据返回格式
![b98ac5f87d14e80b78fde4c5e361ac40.png](https://i-blog.csdnimg.cn/blog_migrate/0768feaef8f333f1372443e2bc9488ba.jpeg)
在index.vue中,调用菜单接口,处理接口返回数据,重点在红圈内
![88c89c78ef0ee337c418b4175e87d58d.png](https://i-blog.csdnimg.cn/blog_migrate/ab7f1d87ae7b94d5b5e596f80a40d2e9.jpeg)
总结,菜单返回的信息要包含router信息,这个信息不能直接使用,需要重新封装路由,用router.addRoutes(asyncRouters)把路由信息重新添加。