關於動態使用keepAlive不生效的問題

blackAge發表於2024-04-01

首先，我想實現在返回頁面時，頁面不進行重新整理，比如我原先選擇的第四頁，返回後顯示了第一頁

想到使用keepAlive快取元件，大部分推薦的方法為這樣，但是不生效

<keep-alive v-if="$route.meta.keepAlive">
        <router-view  />
</keep-alive>
<router-view v-else />

正確的使用方法　

 <keep-alive>
        <router-view v-if="$route.meta.keepAlive" />
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive" />

原因

透過v-if來判斷是否生成keep-alive，當列表頁面符合條件時，記憶體快取了元件狀態。當跳轉到詳情頁時，不符合條件，由於v-if是掛載到keep-alive標籤上，會把之前keep-alive的列表頁面進行銷燬，再次進入到列表會重新建立　

相關文章