背景介绍

最近在做公司后台管理系统项目时遇到一个比较怪异的bug——采用keep-alive+vue-router实现的路由缓存遇到缓存不生效的情况。

vue-router组件缓存未生效的bug

项目背景

此项目是基于iview-admin@2.0进行开发的，全局状态管理采用vuex分module实现，路由采用vue-router进行路由配置表的方式实现。

项目属于基于RBAC的后台管理系统，需要多用户多角色的权限控制，同时路由功能菜单以及展示的字段需按角色划分，因此左侧系统菜单根据接口进行动态设置。

项目中可以进行菜单的图标、跳转路径、是否隐藏等进行配置，路径对应的前端路由则由前端的路由记录进行管理，即菜单管理功能设置的跳转路径是否可用由此路由记录决定。

解决过程

核实路由缓存用法问题

发现这个bug之后梳理了一遍路由组件缓存的实现方案，同时仔细核对了一遍vue-router的官方文档

官方推荐的用法如下：

<transition>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</transition>

可以排除基本用法的问题，如是继续翻阅vue的官方文档，keep-alive的缓存匹配原理是根据组件的name作为key来进行缓存，官方的提示

vue-router官网的提示

随即检查代码中的路由记录的name以及对应component的name，发现都有定义好，因此排除基本用法的错误导致。

iview-admin的不完善导致

进行上述问题排查后定位到此问题出在keep-alive组件的include参数处，keep-alive的参数说明如下：

• include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
• exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
• max - 数字。最多可以缓存多少组件实例。

iview-admin@2.0中通过路由的meata参数——notCache来控制路由对应的组件是否进行缓存，其源码中有如下注释说明：

设为true后页面在切换标签后不会缓存，如果需要缓存，无需设置这个字段，而且需要设置页面组件name属性和路由配置的name一致

其文档文档上关于路由meta参数的说明在这里。

其注释说明说要让组件实现缓存必须要保证页面组件的name和路由配置的name一致，而该项目中路由配置根据由后台设置功能决定，故修改不能缓存的页面的路由配置的namne即可解决问题。

仅仅是解决了此bug总感觉还不够，不如顺便研究一个iview-admin的源码是如何实现路由缓存的。

iview-admin实现路由组件缓存原理

路由分类

路由动态注册

vuex的store中的user模块添加获取用户路由配置的action——getUserRoutes，在用户登录成功后或者或者Main.vue的mounted生命周期中根据用户token调用接口获取用户路由配置

调用router.addRoutes方法进行路由的动态注册。

更进一步

本文最终对遇到的vue路由缓存bug进行了修复，同时也对项目进行了一定的优化改造，后续对于vue-router源码的进一步研究也已经完成，想知道本文遇到的’坑‘在源码中是如何’埋下‘的，请阅读我专栏的下一篇文章——带你全面分析vue-router源码（万字长文）。

若此文对你有一点点帮助请点个赞鼓励下作者，毕竟原创不易:)
首发自语雀：https://www.yuque.com/johniexu/frontend/dhgooo
作者博客地址：blog.lessing.online/
作者github：github.com/johniexu