Vue3使用KeepAlive不生效的解决方法
作者：大白萝卜
问题描述
使用arco-design-pro的vue3后台框架, 切换路由时, 组件包裹的keepAlive不生效, 切换tab后组件状态会刷新, 并重新获取接口, 导致页面切换时闪烁
尝试了网上说的很多方法, 例如添加name、路由层级等等依旧无法解决, 之后开始剥洋葱, 删减代码, 做最小复现后, 得出解决方案
解决方法
请注意: 解决方案可能并不全面, 可以参考网上许多基础的帖子, 我总结了在实际项目中出现并且容易忽略的位置，可能带有一些主观性，但希望能提供一些灵感。
router路由中需要添加name, 和组件中需要保持一致即可
如果需要keepAlive的页面是孙路由, 子路由组件的router-view也应该包裹keepAlive.
如上图子路由的组件studentAccount下有孙组件studentList, 并需要缓存studentList, 则应该在studentAccount的route-view也加入keepAlive
- vue3中会根据组件名自动生成name, 但有时我们的组件或者文件名并不是name, 导致自动生成的和路由的name对应不上, 这时需要手动命名组件,
根据官网的提示, 组件帮我自动生成了name, 但我的文件夹名称是student, 而不是studentAccount, 导致vue自动生成的name和路由中的不匹配
查阅官网后发现, 需要使用defineOptions进行手动命名, 值得注意的是, 要使用defineOptions, 而不是defineComponent
- arco的组件库在顶层的layout中添加了cacheList, 导致keepAlive不生效
cacheList存储在store中, 默认值是空数组, 也就是所有页面都不缓存, 我们需要将缓存的页面路由名称放到cacheTabList中
思路总结
keepAlive的不生效可能是多种多样的, 但排查思路大同小异, 希望对正在被keepAlive折磨的友友有帮助~
以上就是Vue3使用KeepAlive不生效的解决方法的详细内容，更多关于Vue3 KeepAlive不生效的资料请关注脚本之家其它相关文章！