场景是列表页有搜索条件后跳入详情页,从详情页返回列表页不刷新。
在列表和详情页设置keepAlive
//路由页
meta: {
title: '详情页',
keepAlive: true //此组件需要被缓存
}
meta: {
title: '列表',
keepAlive: true //此组件需要被缓存
}
//app.vue页
<router-view v-slot="{ Component }" v-if="$route.meta.keepAlive">
<keep-alive>
<component :is="Component" />
</keep-alive>
</router-view>
<router-view v-slot="{ Component }" v-if="!$route.meta.keepAlive">
<component :is="Component" />
</router-view>
这种方式详情页也会被缓存, 有两个方法。
第一个方法是进入详情页时重新弹出一个页面,详情页是新页面。 详情返回列表时关闭页面,这个方式适合pc端手机端无效
//打开新页面
let routeData = router.resolve({ path: '/detail', query: { id:data.id} });
window.open(routeData.href, '_blank');
//关闭页面
window.close();
第二个方法是进入详情页后判断路由,如果从列表页进入,页面不刷新但重新获取数据。
watch:{
$route(to,from){
if(from.name=='list'){
this.productId=this.$route.query.id
this.getData()
}
}
}