Vue动态添加路由addRoutes时，为何动态路由无法存入缓存？

本文共计1319个文字，预计阅读时间需要6分钟。

在我不知情的情况下，vue的路由似乎可以通过+addRoutes+动态添加。我只知道vue的路由信息都写死在路由表中，每次跳转时再去加载对应的路由。直到在一个新公司接手项目，需要根据用户权限显示不同内容时，才意识到这个痛点。

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

router.addRoutes：

函数签名：

router.addRoutes(routes: Array<RouteConfig>)

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

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

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

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

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

先说说我们的需求吧。