关于keep-alive二级及以上路由缓存失效问题

来源：10-1 keep-alive（1）

rookie_white

2021-06-25

老师您好！我在使用keep-alive的时候，出现多层路由嵌套的时候keep-alive会出现缓存失效的情况。
后台管理系统假设我有二级侧边栏，每一级对应到不同的路由上

- layout（是最外层的容器组件）
	- a.1 侧边栏1级
		- a.2 侧边栏2级
,在最外层keep-alive包裹了整个<router-view>组件

路由配置结构如下
[{
	name: 'layout', ...., children: [{ name: 'a.1', ..., children: [{ name: 'a.2', ...}] }]
}]

缓存到a.1组件的还是生效的，但是我切换到a.2组件的时候，就会一直触发created钩子函数，没办法缓存。

我现在的解决方案就是，将菜单栏的数据跟路由数据进行分离，最终生成的路由配置都是一级的，没有children，不会有嵌套的情况。
但是我不明这个keep-alive缓存失效的原因，麻烦老师解答一下，谢谢

写回答

1回答

ustbhuangyi

2021-06-25

已采纳

建议遇到这种问题去从源码层面调试一下，看看 KeepAlive 组件的缓存到底是什么，以及重新渲染的时候为什么没有走缓存

rookie_white

好的，谢谢老师！

2021-06-26

共1条回复

Vue.js 源码深入解析深入理解Vue实现原理

全方位讲解 Vue.js 源码，进阶高级工程师

4986 学习 · 1038 问题

相似问题

回答 1

回答 1

回答 1

回答 1

回答 2