解决vue3使用KeepAlive不生效

大白萝卜
1,411 阅读2分钟

问题描述

使用arco-design-pro的vue3后台框架, 切换路由时, 组件包裹的keepAlive不生效, 切换tab后组件状态会刷新, 并重新获取接口, 导致页面切换时闪烁

尝试了网上说的很多方法, 例如添加name、路由层级等等依旧无法解决, 之后开始剥洋葱, 删减代码, 做最小复现后, 得出解决方案

解决方法

⚠️请注意: 解决方案可能并不全面, 可以参考网上许多基础的帖子, 我总结了在实际项目中出现并且容易忽略的位置，可能带有一些主观性，但希望能提供一些灵感。

  1. router路由中需要添加name, 和组件中需要保持一致即可

  2. 如果需要keepAlive的页面是孙路由, 子路由组件的router-view也应该包裹keepAlive.

image.png

如上图子路由的组件studentAccount下有孙组件studentList, 并需要缓存studentList, 则应该在studentAccount的route-view也加入keepAlive

image.png

  1. vue3中会根据组件名自动生成name, 但有时我们的组件或者文件名并不是name, 导致自动生成的和路由的name对应不上, 这时需要手动命名组件,

image.png

根据官网的提示, 组件帮我自动生成了name, 但我的文件夹名称是student, 而不是studentAccount, 导致vue自动生成的name和路由中的不匹配

image.png

查阅官网后发现, 需要使用defineOptions进行手动命名, 值得注意的是, 要使用defineOptions, 而不是defineComponent

image.png

  1. arco的组件库在顶层的layout中添加了cacheList, 导致keepAlive不生效

image.png

cacheList存储在store中, 默认值是空数组, 也就是所有页面都不缓存, 我们需要将缓存的页面路由名称放到cacheTabList中

image.png

思路总结

keepAlive的不生效可能是多种多样的, 但排查思路大同小异, 希望对正在被keepAlive折磨的友友有帮助~

  1. 检查router和组件中的name是否对应
  2. 从需要缓存的组件往外剥洋葱, 确认每层的keepAlive使用无误
  3. 删减不需要的代码, 尽可能实现最小复现
  4. 不同版本之间存在实现差异, 可以多看vue官方文档, 说不定会豁然开朗
avatar
文章
阅读
粉丝