vue组件缓存 keep-alive缓存列表

最新推荐文章于 2025-06-20 11:50:41 发布

Museions

最新推荐文章于 2025-06-20 11:50:41 发布

阅读量2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：大前端开发文章标签： vue vue-router 组件 javascript

本文解决了你的问题吗？转载注明链接,帮助更多人。

本文链接：https://blog.youkuaiyun.com/museions/article/details/79268301

大前端开发专栏收录该内容

157 篇文章

订阅专栏

本文介绍了如何在Vue项目中通过路由配置实现组件缓存，避免重复加载数据，提高用户体验。主要通过<keep-alive>标签配合路由元信息(meta)区分需要缓存的组件，并在activated生命周期钩子中处理数据加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.在路由渲染出口做如下设置：
<keep-alive>
<router-view v-if='$route.meta.keepAlive'></router-view> //需要缓存的组件在这里渲染
</keep-alive>
<router-view v-if='!$route.meta.keepAlive'></router-view> //不需要缓存的组件在这里渲染

2.router.js路由组件配置：
{path:'/hello',component:Hello,meta:{keepAlive:true}},//需要缓存的组件
{path:'/world',component:World,meta:{}} //不需要缓存的组件

3.在需要缓存的组件实例中设置
为了避免重复加载数据或者缓存组件后数据需要重新加载，因此需要在组件实例的不同的生命周期钩子函数中获取数据，以此来刷新或者缓存数据：
直入主题：
在 activated(){} 钩子函数中获取数据,首次渲染组件时会激活，再次渲染组件时此钩子函数也会激活，相关数据获取的生命周期函数将会不再执行。
所以就达到了首次从服务端获取数据，而不会重复获取的目的.
示例：
activated(){
this.getList();
},
methods:{
getList(){..}
}