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判断录入的日期是否合法
Jan 08 Javascript
js 编写规范
Mar 03 Javascript
js对象基础实例分析
Jan 13 Javascript
JavaScript类继承及实例化的方法
Jul 25 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
很棒的js Tab选项卡切换效果
Aug 30 Javascript
浅谈Web页面向后台提交数据的方式和选择
Sep 23 Javascript
jQuery实现拖动剪裁图片作为头像
Dec 28 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
Jan 16 Javascript
浅谈Node.js 沙箱环境
May 15 Javascript
echarts实现词云自定义形状的示例代码
Feb 20 Javascript
Vue分页效果与购物车功能
Dec 13 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开发微信支付获取用户地址
2015/10/04 PHP
开启PHP Static 关键字之旅模式
2015/11/13 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
JQuery实现简单验证码提示解决方案
2012/12/20 Javascript
JavaScript实现复制功能各浏览器支持情况实测
2013/07/18 Javascript
实现动画效果核心方式的js代码
2013/09/27 Javascript
jQuery统计上传文件大小的方法
2015/01/24 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
2015/04/16 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
2015/06/29 Javascript
Javascript基础回顾之(一) 类型
2017/01/31 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
如何使用angularJs
2017/05/08 Javascript
微信小程序的生命周期的详解
2017/10/19 Javascript
React数据传递之组件内部通信的方法
2017/12/31 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
2018/01/23 jQuery
VUE 解决mode为history页面为空白的问题
2019/11/01 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
2019/12/06 Javascript
原生javascript中this几种常见用法总结
2020/02/24 Javascript
Python利用pandas计算多个CSV文件数据值的实例
2018/04/19 Python
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
python使用turtle库绘制时钟
2020/03/25 Python
对python判断是否回文数的实例详解
2019/02/08 Python
opencv python 图像轮廓/检测轮廓/绘制轮廓的方法
2019/07/03 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
python GUI库图形界面开发之PyQt5布局控件QVBoxLayout详细使用方法与实例
2020/03/06 Python
在django admin中配置搜索域是一个外键时的处理方法
2020/05/20 Python
小天鹅官方商城:LittleSwan
2017/06/16 全球购物
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
在数据文件自动增长时,自动增长是否会阻塞对文件的更新
2014/05/01 面试题
Python中如何定义一个函数
2016/09/06 面试题
Java程序员面试题
2013/07/15 面试题
反洗钱宣传活动总结
2014/08/26 职场文书
关于学习的决心书
2015/02/05 职场文书
开业庆典嘉宾致辞
2015/08/01 职场文书
导游词之宿迁乾隆行宫
2019/10/15 职场文书
Python爬虫网络请求之代理服务器和动态Cookies
2022/04/12 Python