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

在我不知道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给过滤出来），然后再过滤路由，然后再动态添加，这对性能来说是一个不小的开销，所以我就琢磨着能不能把首次过滤好的路由给存在缓存中，这样下次就可以直接动态添加缓存中的路由了，岂不是是一件很美好的事情，结果是我想错了，你们都想错了！

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

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

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

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

写了这么多，如果各位前端同行看的不是很明白的话，可以自己动手尝试一下，实践是检验真理的唯一标准！

本文参考地址：

https://segmentfault.com/q/1010000009127330

https://segmentfault.com/q/1010000009524078