vue中使用keepAlive的坑

前言：

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
		}
},
           

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

解决：

首先在路由中配置isrefersh用来监测页面从新获取数据

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

首页

当离开首页时判断是否去列表页，去的话给isrefersh设置为true

beforeRouteLeave (to, from, next) { 
	if(to.name=="MatchDetail" || to.name=="MatchDetail2")
	{
		to.meta.isrefersh = true;
	}
	next(); 
},
           

列表页

进入列表页的时候设置keppAlive，然后通过isrefersh判断是否刷新页面

**注：**不用再created 或 mounted生命周期中调用接口了，beforeRouteEnter在每次进入这个页面的时候都会触发

beforeRouteEnter(to, from, next){ 
	to.meta.keepAlive= true; 
	next(vm=>{ 
	//这里把页面初始值重新赋值，以刷新页面 
	if(vm.$route.meta.isrefersh){ 
			vm.programmeData=[]
			vm.$route.meta.isrefersh=false;
			vm.init();// 重新调用数据接口
	} })
},
beforeRouteLeave(to, from, next) {
	from.meta.keepAlive= true
	next();
},
           

详情页

在详情页中判断如果返回列表页设置keepAlive，并不需要刷新数据。

beforeRouteLeave (to, from, next) { 
	if(to.name=="MatchDetail" || to.name=="MatchDetail2"){
		to.meta.keepAlive = true; 
		to.meta.isrefersh=false; 
  	}
	next()
}