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 form 验证函数 弹出对话框形式
Jun 23 Javascript
firefox下对ajax的onreadystatechange的支持情况分析
Dec 14 Javascript
Jquery 实现Tab效果 思路是js思路
Mar 02 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
May 23 Javascript
Javascript alert消息换行的方法
Aug 07 Javascript
js实现滑动触屏事件监听的方法
May 05 Javascript
jQuery 中ajax异步调用的四种方式
Jun 28 Javascript
基于vue+canvas的excel-like组件实例详解
Nov 28 Javascript
React diff算法的实现示例
Apr 20 Javascript
菊花转动的jquery加载动画效果
Aug 19 jQuery
javascript将16进制的字符串转换为10进制整数hex
Mar 05 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 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 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
Discuz 模板引擎的封装类代码
2008/07/18 PHP
PHP源代码数组统计count分析
2011/08/02 PHP
php array_filter除去数组中的空字符元素
2020/06/21 PHP
基于php设计模式中工厂模式详细介绍
2013/05/15 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
使用PHP实现阻止用户上传成人照片或者裸照
2014/12/25 PHP
php多线程实现方法及用法实例详解
2015/10/26 PHP
PHP中类型转换 ,常量,系统常量,魔术常量的详解
2017/10/26 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
用JavaScript对JSON进行模式匹配(Part 1-设计)
2010/07/17 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
jQuery选择器总结之常用元素查找方法
2016/08/04 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
2017/03/29 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
layui框架中layer父子页面交互的方法分析
2017/11/15 Javascript
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
javascript性能优化之分时函数的介绍
2018/03/28 Javascript
小程序scroll-view组件实现滚动的示例代码
2018/09/20 Javascript
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
Python通过select实现异步IO的方法
2015/06/04 Python
python实现汉诺塔递归算法经典案例
2021/03/01 Python
使用python批量读取word文档并整理关键信息到excel表格的实例
2018/11/07 Python
对python调用RPC接口的实例详解
2019/01/03 Python
python绘制直方图和密度图的实例
2019/07/08 Python
Matlab使用Plot函数实现数据动态显示方法总结
2021/02/25 Python
工厂厂长的职责
2013/12/12 职场文书
工商管理专业职业生涯规划
2014/01/01 职场文书
大学生如何写自荐信
2014/01/08 职场文书
个人担保书格式范文
2014/05/12 职场文书
企业总经理助理岗位职责
2014/09/12 职场文书
单位委托书
2014/10/15 职场文书
投标售后服务承诺书
2015/04/29 职场文书
聋哑人盗窃罪辩护词
2015/05/21 职场文书
Redis基本数据类型List常用操作命令
2022/06/01 Redis