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选项卡Tabs组件实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了vue实现监听localstorage值变化，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了Vue中封装input组件的实例详解的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下2017-10-10
这篇文章主要介绍了Vue如何根据角色获取菜单动态添加路由,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
这篇文章主要给大家介绍了关于vite打包拆分js和css的配置指南,Vite是一个非常快速的工具,它可以帮助你打包JavaScript文件,需要的朋友可以参考下2023-09-09
这篇文章主要给大家介绍了关于Vue3更高效的构建工具Vite使用的相关资料,Vite是一种面向现代浏览器的一个更轻、更快的前端构建工具,能够显著提升前端的开发体验,需要的朋友可以参考下2023-10-10
这篇文章主要为大家详细介绍了如何利用Vue实现点击图片放大功能，文中的示例代码讲解详细，具有一定的借鉴价值，需要的可以参考一下2022-12-12
这篇文章主要为大家详细介绍了Vue使用video标签实现视频播放，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了如何在vue单页中重复引入同一子组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
Vue-router优化import引入过多导致index文件臃肿问题
这篇文章主要为大家介绍了Vue-router优化import引入过多导致index文件臃肿问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
最新评论