vue3中使用router4 keepalive的問題

更新時(shí)間：2022年08月13日 14:48:28 作者：懵懂的程序員小曲

這篇文章主要介紹了vue3中使用router4 keepalive的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue3使用router4 keepalive問題

項(xiàng)目從vue2升級(jí)到vue3，路由也緊跟著升級(jí)到了4，然后在使用keep-alive的時(shí)候一直不生效，就去查文檔

vue2.x與vue3.0的App.vue配置有差異，在App.vue配置信息如下：

vue2.x中，router-view可整個(gè)放入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>

但是假如按照這樣配置，會(huì)有一個(gè)問題，假如A頁(yè)面時(shí)緩存頁(yè)面，跳轉(zhuǎn)到B頁(yè)面也是緩存頁(yè)面的話

就會(huì)是報(bào)Uncaught (in promise) TypeError: parentComponent.ctx.deactivate is not a function 這個(gè)錯(cuò)誤

所以需要再中間中配置key值，來(lái)表示組件的唯一性和對(duì)應(yīng)關(guān)系，如：:key="$route.path"

而且不要?jiǎng)討B(tài)修改to.meta.keepAlive的值控制是否緩存。

會(huì)存在第一次將to.meta.keepAlive設(shè)置為true是還是會(huì)發(fā)送請(qǐng)求，因?yàn)榈谝淮问莿?chuàng)建組件，沒有緩存，需要緩存后，下一次進(jìn)入才不會(huì)發(fā)送請(qǐng)求。因?yàn)槿绻铋_始進(jìn)入的時(shí)候to.meta.keepAlive值為false的話，渲染的是沒有使用keep-alive的組件。

使用keepalive的坑

vue中使用keepAlive數(shù)據(jù)不刷新，只緩存第一次進(jìn)入的頁(yè)面數(shù)據(jù)。

需求

首頁(yè)進(jìn)入列表頁(yè)，根據(jù)不同id刷新列表頁(yè)面數(shù)據(jù)，列表頁(yè)進(jìn)入詳情頁(yè)，詳情頁(yè)返回列表頁(yè)時(shí)不刷新。

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

這個(gè)路由是列表頁(yè)的路由，按照這種方式寫的話確實(shí)會(huì)緩存頁(yè)面，但是每次切換頁(yè)面的時(shí)候會(huì)導(dǎo)致數(shù)據(jù)還是舊的。

解決

首先在路由中配置isrefersh用來(lái)監(jiān)測(cè)頁(yè)面從新獲取數(shù)據(jù)

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

首頁(yè)

當(dāng)離開首頁(yè)時(shí)判斷是否去列表頁(yè)，去的話給isrefersh設(shè)置為true

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

列表頁(yè)

進(jìn)入列表頁(yè)的時(shí)候設(shè)置keppAlive，然后通過isrefersh判斷是否刷新頁(yè)面

**注：**不用再created 或 mounted生命周期中調(diào)用接口了，beforeRouteEnter在每次進(jìn)入這個(gè)頁(yè)面的時(shí)候都會(huì)觸發(fā)

beforeRouteEnter(to, from, next){?
?? ?to.meta.keepAlive= true;?
?? ?next(vm=>{?
?? ?//這里把頁(yè)面初始值重新賦值，以刷新頁(yè)面?
?? ?if(vm.$route.meta.isrefersh){?
?? ??? ??? ?vm.programmeData=[]
?? ??? ??? ?vm.$route.meta.isrefersh=false;
?? ??? ??? ?vm.init();// 重新調(diào)用數(shù)據(jù)接口
?? ?} })
},
beforeRouteLeave(to, from, next) {
?? ?from.meta.keepAlive= true
?? ?next();
},

詳情頁(yè)

在詳情頁(yè)中判斷如果返回列表頁(yè)設(shè)置keepAlive，并不需要刷新數(shù)據(jù)。

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

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: