vue3中使用router4 keepalive的問題

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

這篇文章主要介紹了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"

而且不要動態(tài)修改to.meta.keepAlive的值控制是否緩存。

會存在第一次將to.meta.keepAlive設置為true是還是會發(fā)送請求，因為第一次是創(chuàng)建組件，沒有緩存，需要緩存后，下一次進入才不會發(fā)送請求。因為如果最開始進入的時候to.meta.keepAlive值為false的話，渲染的是沒有使用keep-alive的組件。

使用keepalive的坑

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

需求

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

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

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

解決

首先在路由中配置isrefersh用來監(jiān)測頁面從新獲取數(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
?? ??? ?}
},

首頁

當離開首頁時判斷是否去列表頁，去的話給isrefersh設置為true

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

列表頁

進入列表頁的時候設置keppAlive，然后通過isrefersh判斷是否刷新頁面

**注：**不用再created 或 mounted生命周期中調用接口了，beforeRouteEnter在每次進入這個頁面的時候都會觸發(fā)

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

詳情頁

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

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

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: