vue动态添加路由addRoutes之不能将动态路由存入缓存的解决


Posted in Javascript onFebruary 19, 2019

在我不知道vue的路由还可以通过addRoutes动态添加时,我只知道vue的路由都是写死在路由表中的,每当跳转时再去加载相应的路由。直到在一个新公司接到需要根据用户的权限显示不同的菜单的需求时才知道了原来vue-router还有一个addRoutes的API,立马研究了一下。

router.addRoutes:

函数签名:

router.addRoutes(routes: Array<RouteConfig>)

动态添加更多的路由规则。参数必须是一个符合routes选项要求的数组。

点这里去看router.addRoutes的官方解释

白话就是需要动态加入到路由表中的路由是必须要跟我们提前写死的路由规则是一样的。

有了这个玩意儿我们就可以依据系统管理员给用户分配的权限来实现不同的用户可以进入不同的菜单页面的功能,是不是很nice?是不是很优秀?

但这个还不是本文的重点,本文的重点是“不能将需要动态添加的路由存入缓存!” 为什么这么说呢?

先说说我们的需求吧。

我们的项目开发中的动态路由是提前配好在路由表中的,只是和静态路由分开写在了两个对象中,导出的时候默认只导出静态路由,所谓的静态路由就是所有用户都可以访问到的公共路由,比如登录页面、404页面等。而不同用户可访问不同的菜单页面是根据接口返回的一个菜单code来过滤提前配好的动态路由(提前配好的动态路由中也有一个code),再将过滤后的路由使用router.addRoutes动态添加即可。可能有些公司是通过接口直接把用户的动态路由表按照路由的规则形式给返回了出来,前端只需拿到路由表稍作处理然后addRoutes就可以了。每个公司有每个公司的想法,你开心就好!

接下来就是我们项目中的路由过滤了,这里省略1000字,路由过滤完成并动态添加后就可以很愉快的访问菜单页面了。但我想的是,在全局路由守卫中请求接口返回的code(这里接口返回的是一个包含code和其他数据的json数组,所以我还得先把接口返回的code给过滤出来),然后再过滤路由,然后再动态添加,这对性能来说是一个不小的开销,所以我就琢磨着能不能把首次过滤好的路由给存在缓存中,这样下次就可以直接动态添加缓存中的路由了,岂不是是一件很美好的事情,结果是我想错了,你们都想错了!

来先看看过滤后打印出来的路由吧:

vue动态添加路由addRoutes之不能将动态路由存入缓存的解决

再来看看从缓存中读出来的路由吧:

vue动态添加路由addRoutes之不能将动态路由存入缓存的解决

从两张图上红色矩形圈圈可以看出,从缓存中读出来的路由信息已经发生了改变,父路由中的render方法也没有了(第一张图中父路由的render方法还是有的,到了第二张就没有了),且子路由children里边已经没有了component属性(从第二张图中的红色箭头处可以看出),这显然不是我们想要的路由信息。有人说可以使用import xxx from ‘xxx'来替代component的值,这个针对父路由的component都引用了同一个Layout组件来说是可以的,但是子路由呢?从缓存中读出来的子路由连component都没有了,即使是有这个属性,但子路由都引用了不同的component,那你怎么玩?况且将过滤后的路由信息通过缓存的存取来实现,安全上就会有问题,因为如果户手动修改了缓存里的路由,那你所谓的动态路由权限岂不是立马破功了。

所以,我们能做的就只能是在每次切换路由时都要重新请求接口并根据返回的code来动态过滤路由并添加,或者根据后端返回的动态路由表直接添加,性能上浪费一点也是没有办法的事儿,总比实现不了或不安全来的更好一点。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript学习网址备忘
May 29 Javascript
javascript EXCEL 操作类代码
Jul 30 Javascript
Jquery 设置标题的自动翻转
Oct 03 Javascript
js清空form表单中的内容示例
May 20 Javascript
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
May 21 Javascript
jquery实现ajax加载超时提示的方法
Jul 23 Javascript
JSON 数据详解及实例代码分析
Jan 20 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
Feb 15 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
Aug 22 Javascript
详解ECMAScript typeof用法
Jul 25 Javascript
vue+animation实现翻页动画
Jun 29 Javascript
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 #jQuery
Vue 实现手动刷新组件的方法
Feb 19 #Javascript
jQuery选择器之层次选择器用法实例分析
Feb 19 #jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 #jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 #jQuery
详解vue几种主动刷新的方法总结
Feb 19 #Javascript
jQuery事件多次绑定与解绑问题实例分析
Feb 19 #jQuery
You might like
PHP文本数据库的搜索方法
2006/10/09 PHP
深入密码加salt原理的分析
2013/06/06 PHP
解决php使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
Smarty模板学习笔记之Smarty简介
2014/05/20 PHP
php实现的Curl封装类Curl.class.php用法实例分析
2015/09/25 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
在页面加载完成后通过jquery给多个span赋值
2014/05/21 Javascript
jQuery版AJAX简易封装代码
2016/09/14 Javascript
nodejs连接mongodb数据库实现增删改查
2016/12/01 NodeJs
学习vue.js中class与style绑定
2016/12/03 Javascript
Vue2.0实现购物车功能
2017/06/05 Javascript
node+koa实现数据mock接口的方法
2017/09/20 Javascript
详解webpack性能优化——DLL
2017/10/20 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
Python 面试中 8 个必考问题
2018/11/16 Python
python 实现多维数组(array)排序
2020/02/28 Python
为什么python比较流行
2020/06/19 Python
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
写一个函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度
2015/11/18 面试题
挂职自我鉴定
2014/02/26 职场文书
同学聚会主持词
2014/03/18 职场文书
公证委托书模板
2014/04/03 职场文书
大学生活动总结怎么写
2014/04/29 职场文书
小学生民族团结演讲稿
2014/08/27 职场文书
少先队活动总结
2014/08/29 职场文书
学校组织向国旗敬礼活动方案(中小学适用)
2014/09/27 职场文书
党员示范岗材料
2014/12/19 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书
田径运动会广播稿
2015/08/19 职场文书
《金色的草地》教学反思
2016/02/17 职场文书
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python
在redisCluster中模糊获取key方式
2021/07/09 Redis
Python实现Hash算法
2022/03/18 Python