vue3中使用router4 keepalive的問題
vue3使用router4 keepalive問題
項目從vue2升級到vue3，路由也緊跟著升級到瞭4，然後在使用keep-alive的時候一直不生效，就去查文檔
vue2.x與vue3.0的App.vue配置有差異，在App.vue配置信息如下：
vue2.x中，router-view可整個放入keepalive中，如下：
<template> <!-- vue2.x配置 --> <keep-alive> <router-view v-if="$route.meta.keepAlive" /> </keep-alive> <router-view v-if="!$route.meta.keepAlive"/> </template>
<template>
<!-- vue3.0配置 -->
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" v-if="$route.meta.keepAlive"/>
</keep-alive>
<component :is="Component" v-if="!$route.meta.keepAlive"/>
</router-view>
</template>
但是假如按照這樣配置，會有一個問題，假如A頁面時緩存頁面，跳轉到B頁面也是緩存頁面的話
就會是報Uncaught (in promise) TypeError: parentComponent.ctx.deactivate is not a function 這個錯誤
所以 需要再中間中配置key值，來表示組件的唯一性和對應關系，如：:key="$route.path"
而且 不要動態修改to.meta.keepAlive的值控制是否緩存。
會存在第一次將to.meta.keepAlive設置為true是還是會發送請求，因為第一次是創建組件，沒有緩存，需要緩存後，下一次進入才不會發送請求。因為如果最開始進入的時候to.meta.keepAlive值為false的話，渲染的是沒有使用keep-alive的組件。
使用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()
}
以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。