前言:
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()
}