之前在基于Vue实现后台系统权限控制一文中提到路由权限的实现思路,因为不喜欢在每次路由跳转的before钩子里做判断,所以在初始化Vue实例前对路由做了筛选,再用实际路由初始化Vue实例,代价是登录页需要从Vue实例中独立出来,实现上倒没什么问题,不过这种做法需要在登录和首页之间通过url跳转,感觉总是不太”优雅”,实际上只要能在登录后动态修改当前实例的路由就行了,之前确实没办法,但vue-router 2.2版本新增了一个router.addRoutes(routes)方法,让动态路由得以实现。 想当然的实现方案 用动态路由实现路由权限控制貌似是一个完美的方案,初始路由只有登录和404,登录
2022-09-05 16:21:45 77KB add dd sessionstorage
1
前言 某些场景下我们需要利用addRoutes动态添加路由,但是刷新后就会失效,前段时间项目里刚好遇到了这个应用场景,所以就花时间研究了一下,做下分享跟记录,说的不对的地方,请大家指正。 应用场景:用户a登录进系统,页面上有个按钮,点击之后会动态添加路由并且跳转,跳转过去之后,用户刷新后也会停留在当前页面。 不点这个按钮,浏览器输入地址,用户会跳到404页面 github:https://github.com/Mrblackant/keepRouter/tree/master 思路 1.用户点击按钮,用addRutes动态添加路由并跳转,并把路由保存; 2.用户在新跳转的页面,刷新
2022-05-26 11:03:12 71KB add dd ue
1
需求 最近接手一个后台管理系统,需要实现导航菜单从后台拉取的效果;根据登录用户的权限不同分别拉出来的导航菜单也不一样,另外可操作的界面也存在区别。 问题 因为后台管理系统是准备使用vue+vue-router+element-ui+vuex的搭配来做的,可是单页应用在进入页面之前就已经将vue-router实例化并且注入vue实例中了,所以在进入登录页面的时候旧没办法在重新定制路由了。接下来各种百之谷之,发现vue-router在2.0版本中提供了addRoutes方法添加路由,希望的曙光出现。 经过一番折腾终于实现了功能,记录下来便于回顾,也希望能帮助到同样有需求的同志。 思路 1、首先在
2022-04-01 17:20:56 235KB add dd subs
1
主要介绍了vue 解决addRoutes动态添加路由后刷新失效问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
2021-12-14 14:40:57 76KB vue addroutes 刷新 vue动态路由刷新失效
1
本篇文章主要介绍了vue addRoutes实现动态权限路由菜单的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
1
本篇文章主要介绍了vue-router+vuex addRoutes实现路由动态加载及菜单动态加载,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
2021-11-21 22:30:59 78KB vue router addroutes vuerouter
1
此案例主要实现了一个功能是,在vue实例首次运行时,在加载了login和404两个路由规则,登录成功后,根据登录用户角色权限获取该角色相应菜单权限,生成新的路由规则添加进去。 做过后台管理系统都一定做过这个功能,在对菜单权限进行粗粒度权限控制的时候,通过角色获取菜单后,异步生成菜单,所以一开始拿到需求的时候,我也以为这和平常的没什么不同,不过做起来就发现了很多问题, 1.vue-router的实例,在new vue实例的时候,就加载了,且必须加载,这个时候,登录路由一定要加载,可是这个时候没有登录,无法确定权限 2.路由规则与菜单的同步 解决思路演化,菜单和路由同步,肯定是采用了vuex,一开
2021-07-29 22:23:30 73KB add dd ex
1