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不生效的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了vue 按需引入vant跟全局引入方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
这篇文章主要介绍了详解Vue Elementui中的Tag与页面其它元素相互交互的两三事,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
ant design vue嵌套表格及表格内部编辑的用法说明
这篇文章主要介绍了ant design vue嵌套表格及表格内部编辑的用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了vue3中的hook简单封装，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
本篇文章主要介绍了解决Vue2.0自带浏览器里无法打开的原因（兼容处理），非常具有实用价值，需要的朋友可以参考下2017-07-07
这篇文章主要介绍了Vue+element 商品列表、新增、编辑、删除业务实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
本文给大家介绍Vue 实现穿梭框功能，代码分为css，html和js代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2021-10-10
这篇文章主要给大家介绍了关于vue+element开发一个谷歌插件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
由于 Vue 会在初始化实例时进行双向数据绑定，使用Object.defineProperty()对属性遍历添加 getter/setter 方法，所以属性必须在 data 对象上存在时才能进行上述过程 ，这样才能让它是响应的，这篇文章主要介绍了Vue中$set()的使用方法场景分析,需要的朋友可以参考下2023-02-02
这篇文章主要为大家介绍了VUE3+TS递归组件实现TreeList设计实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
最新评论