vue缓存页面之keepAlive的使用

最新推荐文章于 2025-06-09 10:03:40 发布

原创最新推荐文章于 2025-06-09 10:03:40 发布 · 3.2k 阅读

17 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

40 篇文章

订阅专栏

本文介绍如何在Vue项目中利用Keep-Alive组件实现列表页面的数据缓存，确保从详情页返回列表页时不刷新，而从其他页面进入则刷新。通过在路由配置中设置keepAlive属性，并在需要缓存的页面使用特定代码，可以智能判断是否请求新数据，有效提升用户体验。

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

要实现的功能是，在列表进入详情页后，返回列表页时，列表页不刷新，但是从其他导航页面进入列表页要刷新。
1、第一步：在app.vue使用keepalive

    <div id="app">
        <keep-alive>
			<router-view v-if="$route.meta.keepAlive" />
		</keep-alive>
		<router-view v-if="!$route.meta.keepAlive" />
    </div>

2、第二步：在路由meta中设置keepAlive，这里为什么设置isBack后面会说
在这里插入图片描述
3、第三步：在需要缓存的页面加入下面的代码，事实上，当我们加入keep-alive标签后，meta中keepAlive为true的路由页面数据会在首次访问后将数据缓存到本地的sessionStorage中，我们可以通过加入isBack来判断是否请求新的数据。

       beforeRouteEnter(to, from, next) {
			if (from.name == 'travelnotesdetail') {
				to.meta.isBack = true;
			}
			next();
		},
		activated() {
			if (this.$route.meta.isBack) {
				// 如果isBack是true，表明不需要获取新数据，直接使用缓存的数据    
				let formDataStorage = JSON.parse(sessionStorage.getItem('notes'));
				this.notes = formDataStorage;
				this.$route.meta.isBack = false;
			}else{
				this.getNotes();
				
			}
		},
		methods:{

beforeRouteEnter会在页面跳转之前执行。

值得注意的是

正常页面的生命周期： beforeRouteEnter --> created --> mounted --> destroyed

使用keep-alive后
首次进入缓存页面：beforeRouteEnter --> created --> mounted --> activated --> deactivated
再次进入缓存页面：beforeRouteEnter -->activated --> deactivated

也就是说，使用keep-alive后会多出一个activated ，当页面被缓存时，这个东西非常有用。比如，在详情页中发表了评论，有这个东西，就能在返回列表时通过activated 调用评论列表而不会影响整个页面缓存