如何获取动态路由
1、将所有的路由全部写死在router.js中,如图
2、但是我们需要一个标记来记录本次登录的账号需要展示哪些路由,于是便在meta的对象中加入了一个键值,键名统称为module,值的话我们需要在登录的时候获取后端权限接口来标记。
图一(前端写法)
图二 (后端返回数据)
3、万事俱备只欠东风啦,当我们有了所有的路由,以及当前用户的权限,那么接下来我们就需要对数据进行处理了,找出当前用户具备权限的路由
(该数据是在store中请求处理和存储的)
首先:在strore/modules/user.js文件中引入router.js
再者:获取到权限数据过滤当前用户的路由权限
(以下两张图是上面图内用到的过滤权限路由的方法和第一次跳转的路径获取方法)
数据处理完了,那么接下来只需要渲染啦
当然我们也需要注意的是,我们把路由存在store中,会存在一个问题,当页面强制刷新的时候,store的数据就会不存在了这时我们需要在permission.js中做一些处理
最后当我们退出的时候要重置路由(同样的退出方法也写在store/module/user.js中)
先引入写在router.js的重置方法
(router.js的充值方法)
最后退出方法中直接调用resetRouter()就行了
(该动态获取路由是基于vue-element-admin上实现的)