舊版的語法已經(jīng)失效

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

新版官方推薦使用

<router-view>、<keep-alive> 和 <transition>
transition 和 keep-alive 現(xiàn)在必須通過 v-slot API 在 RouterView 內(nèi)部使用：

<router-view v-slot="{ Component }">
  <transition>
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </transition>
</router-view>

官方推薦的方式是只有keep-alive模式，卻沒有不需要keep-alive的使用方法

錯誤示范

這樣會造成所有頁面都沒有緩存，還不知道原因。

<router-view v-slot="{ Component }" v-if="$route.meta.keepAlive">
    <keep-alive>
      <component :is="Component" >
        <p>緩存頁面</p>
      </component>
    </keep-alive>
  </router-view>
  <router-view v-slot="{ Component }" v-if="!$route.meta.keepAlive">
    <component :is="Component" >
      <p>沒有緩存的頁面</p>
    </component>
  </router-view>

解決方案1

  <router-view v-slot="{ Component }">
    <keep-alive v-if="$route.meta.keepAlive">
      <component :is="Component" >
        <p>緩存頁面</p>
      </component>
    </keep-alive>
    <component :is="Component" v-if="!$route.meta.keepAlive">
      <p>沒有緩存的頁面</p>
    </component>
  </router-view>

使用解決方案1，在某些情況會有問題

假設(shè)A、B頁面是緩存，C頁面是不需要緩存。A、B間跳轉(zhuǎn)不會有問題，A、B跳轉(zhuǎn)C頁面再返回時候緩存會失效一次?？偨Y(jié)就是非緩存和緩存頁面跳轉(zhuǎn)會造成緩存的頁面失效，只有再跳轉(zhuǎn)緩存的頁面才恢復(fù)正常。
這樣可能和我們所預(yù)期的效果會不太一致。

解決方案2

<template>
  <router-view v-slot="{ Component }">
    <keep-alive :include="includeList">
      <component :is="Component"></component>
    </keep-alive>
  </router-view>

</template>
 
<script lang="ts">
//使用動態(tài)include解析
//app.vue文件
  export default {
    name: 'App',
    data(){
      return {
        includeList : []
      }
    },
    watch:{
      $route(to:any) {
        //監(jiān)聽路由變化，把配置路由中keepAlive為true的name添加到include動態(tài)數(shù)組中
        const that:any = this;
        if(to.meta.keepAlive && that.includeList.indexOf(to.name) === -1){
          that.includeList.push(to.name);
        }
      }
    }
  }
</script>