vue中使用keepAlive的坑

最新推荐文章于 2024-04-11 17:11:04 发布

原创

最新推荐文章于 2024-04-11 17:11:04 发布 · 2.7k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#vue #keepAlive #路由钩子 #性能优化

本文介绍了在Vue中使用keepAlive组件缓存页面以避免数据刷新的问题。当从首页进入列表页，根据不同的ID需要刷新列表数据，而从列表页进入详情页再返回时不希望列表页刷新。解决方案是在路由中添加isrefersh字段来监测是否需要刷新数据，通过beforeRouteEnter和beforeRouteLeave钩子函数动态控制页面状态，确保在适当的时候刷新或保持页面数据。

前言：
vue中使用keepAlive数据不刷新，只缓存第一次进入的页面数据。

需求：

首页进入列表页，根据不同id刷新列表页面数据，列表页进入详情页，详情页返回列表页时不刷新。

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

{
		path: '/detail/:type/:articleId/:expertId/:status/:synMatchId/:matchType',
		name: 'Detail',
		component: () => import( /* webpackChunkName: "detail" */ '../views/Detail'),
		meta: {
			hidden: true,
			title: "详情"
		}
},
{
		path: '/match/detail/:id',
		name: 'MatchDetail',
		component: () => import( /* webpackChunkName: "matchdetail" */ '../views/Match/detail.vue'),
		meta: {
			hidden: true,
			title: "详情",
			keepAlive: true
		}
},

这个路由是列表页的路由，按照这种方式写的话确实会缓存页面，但是每次切换页面的时候会导致数据还是旧的。

解决