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 相关文章推荐
各种效果的jquery ui(接口)介绍
Sep 17 Javascript
js 覆盖和重载 函数
Sep 25 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
Oct 21 Javascript
Google的跟踪代码 动态加载js代码方法应用
Nov 12 Javascript
js去除空格的12种实用方法
Nov 08 Javascript
解析JavaScript中点号“.”的多义性
Dec 02 Javascript
angular.element方法汇总
Jan 07 Javascript
JS实现光滑展开合拢的菜单效果代码
Sep 16 Javascript
jQuery实现图片预加载效果
Nov 27 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
Oct 08 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
JavaScript 中判断变量是否为数字的示例代码
Oct 22 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的优点与缺点
2013/04/11 PHP
php实现使用正则将文本中的网址转换成链接标签
2014/12/03 PHP
简单的pgsql pdo php操作类实现代码
2016/08/25 PHP
使用PHP json_decode可能遇到的坑与解决方法
2017/08/03 PHP
thinkPHP5.1框架中Request类四种调用方式示例
2019/08/03 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
JavaScipt基本教程之前言
2008/01/16 Javascript
jQuery 选择器理解
2010/03/16 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
2012/05/23 Javascript
js隐式全局变量造成的bug示例代码
2014/04/22 Javascript
jQuery编写网页版2048小游戏
2017/01/06 Javascript
利用require.js与angular搭建spa应用的方法实例
2017/07/19 Javascript
2种简单的js倒计时方式
2017/10/20 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
使用webpack搭建pixi.js开发环境
2020/02/12 Javascript
Python实现拼接多张图片的方法
2014/12/01 Python
Python赋值语句后逗号的作用分析
2015/06/08 Python
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
Python编程之string相关操作实例详解
2017/07/22 Python
Python3简单实现串口通信的方法
2019/06/12 Python
python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法
2019/07/03 Python
linux下python中文乱码解决方案详解
2019/08/28 Python
pytorch 求网络模型参数实例
2019/12/30 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
即时搜索数百万张门票:SeatsForEveryone.com
2018/08/26 全球购物
Web Service面试题:如何搭建Axis2的开发环境
2012/06/20 面试题
红旗团支部事迹材料
2014/01/27 职场文书
给国外客户的邀请函
2014/01/30 职场文书
消防应急演练方案
2014/02/12 职场文书
就业协议书样本
2014/08/20 职场文书
2014年销售工作总结
2014/12/01 职场文书
校本培训个人总结
2015/02/28 职场文书
2015年法务工作总结范文
2015/05/23 职场文书
JS轻量级函数式编程实现XDM三
2022/06/16 Javascript