Vue中如何解决keep-alive在多级路由下的缓存失效问题？

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

目录

1.问题描述

2.原因分析

3.解决思路

4.处理过程

1.问题描述

账户中心便捷导航菜单中，最后两个菜单项在三级及以上菜单时相同，且在正常切换两个便捷页签时，可以正常缓存，但删除后则不可缓存。

目录

• 1.问题描述
• 2.原因分析
• 3.解决思路
• 4.处理过程

1.问题描述

对账中心当便捷导航菜单最后两个是同一模块且是三级及以上菜单时，正常切换两个便捷页签时是可以正常缓存的，但删除最后一个页签时，此时另一个页签页面此时已经不缓存了。

2.原因分析

keep-alive默认支持缓存是两级，对三级及以上层级的页面缓存失效，之前的处理方式为： 监听到路由变化后，将当前的路由的标识及父级标识一起存起来，当多个页面存在时，关闭其中一个页面，也会将本身及父级的标识一起删掉，此时数组中已无父级标识，其他同级页面的缓存将失效。