Vue-router使用keep-alive失效的坑以及解決方案

問題描述：

需要對頁面A進行緩存，保證從二級頁面B返回可以保留原狀態。頁面A開啟了keepAlive：true；頁面B沒有開啟keepAlive；頁面A跳轉到頁面B，再從頁面B返回頁面A，頁面A緩存失效。

代碼：

1、router.js在路由的meta中設置keepAlive

meta: {
  keepAlive: true
}

2、App.vue設置路由是否被緩存

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

這時候從頁面A調到沒有設置keepAlive的頁面B，再回到頁面A，頁面A緩存失效。

嘗試解決：A頁面beforeRouteEnter，設置keepAlive，失敗！

beforeRouteEnter(to,form,next){
   to.meta.keepAlive = true;
   next();        
}

n久之后，發現了問題，App.vue配置路由展示的寫法不正確，v-if需要寫在<router-view />，寫在<keep-alive />會導致設置了keepAlive的頁面緩存失效

開始改代碼：

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

解決！

 

參（非）考（常）來（感）自（謝）：

https://blog.csdn.net/a3335581/article/details/88388303