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使用element ui自定义手机验证规则问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要为大家详细介绍了vue实现扫码功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
这篇文章主要给大家介绍了关于利用vue组件实现图片的拖拽和缩放功能的相关资料,文中通过实例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-01-01
这篇文章主要介绍了React之input动态取值和赋值方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了vue项目base64转img方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
vue2左侧菜单栏收缩展开目前是非常常见的,我们在日常开发过程中经常会碰到,这篇文章给大家介绍vue2左侧菜单栏收缩展开功能,感兴趣的朋友跟随小编一起看看吧2024-04-04
这篇文章主要为大家详细介绍了Vue实现首页banner自动轮播效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
vue实例配置对象中el、template、render的用法
这篇文章主要介绍了vue实例配置对象中el、template、render的用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
在Vue中,组件之间的传参是构建动态和交互性用户界面的关键,Vue提供了多种方式来传递参数,本文对这些方式进行了详细说明,并有相关的代码供大家参考,需要的朋友可以参考下2025-05-05
这篇文章主要介绍了vue项目中js文件使用vue的this实例说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
最新评论