vue3中使用router4 keepalive的問題

2022-08-13 18:00:58

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()
}

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。

vue3中使用router4 keepalive的問題

目錄

vue3使用router4 keepalive問題

使用keepalive的坑

需求

解決

熱門文章