1、對於一層跳轉，例如 A(列表頁面) ->進入 B(詳情頁面) ->再到 A(列表頁面)，建議用一下方式：

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

2、對於多層跳轉，比如，一個列表頁（a)、詳情頁(b)和詳情擴充套件頁(c)，a -> b頁面，a是快取頁，b需要在每次開啟時，重新渲染；

b -> c頁面，此時b需要被快取，從c返回時，需要b保持不變。建議用一下方式：

<keep-alive :include="['A','B']">
     <router-view></router-view>
</keep-alive>

對於第二種方法官方提供三個屬性：

• include- 字串或正則表示式。只有名稱匹配的元件會被快取。
• exclude- 字串或正則表示式。任何名稱匹配的元件都不會被快取。
• max- 數字。最多可以快取多少元件例項。

<!-- 逗號分隔字串 -->
<keep-alive include="
 
a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正則表示式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 陣列 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is
 
="view"></component>
</keep-alive>

此處需要注意：

　　1、第二種方法需要路由入口必須唯一（即：頁面當中只有一個<router-view></router-view>)，否則緩衝無效（路由都被緩衝）

　　2、:include="['A', 'B']"其中 A B 代表路由的name值

　　3、不管第一種還是第二種方法一旦利用$destory銷燬當前元件，則該元件將不被緩衝

以上兩種用法根據不同需求進行選擇，利用第二種方式一定要注意路由入口唯一問題，還有就是第二種方式更合適和vuex配合

以下是自己在專案中的做法，由於當時搭建的適合用了兩個<router-view></router-view>，所以放棄了第二種方法，但是屬於多層跳轉
A表示類別頁面
B表示詳情頁面
C表示詳情拓展頁面

需求：A進入B(不緩衝)，B進入C(不緩衝)，C進入B(有修改不緩衝，反之修改)，B進入A(有修改不緩衝（此處的修改可能發生在C裡面），反之修改)

A元件程式碼：

beforeRouteEnter(to, from, next){
   to.meta.keepAlive = true;
   next(vm => {
       if (from.path.indexOf("projectDetail") < 0 && from.path != "/" && from.path != "/login") {
            //自己邏輯程式碼
             vm.status = 0;
             vm.getProjectList();
       } 
        if (from.path.indexOf("projectDetail") > -1 && sessionStorage.getItem("reload") == "true") {
           //自己邏輯程式碼
            vm.status = 0;
            vm.getProjectList();
        }
   })
}    

此處判斷 ‘/’ 防止在當前頁面重新整理，判斷 ‘/login’防止當登陸介面呼叫兩次

判斷 sessionStorage.getItem("reload") 記錄一個全域性狀態，判斷B進入A(有修改不緩衝（此處的修改可能發生在C裡面），反之修改)

B元件程式碼：

beforeRouteEnter(to, from, next){
    to.meta.keepAlive = true;
    next(vm => {
      if (from.path.indexOf("projectList") > -1 || from.path == "/") {
            //自己邏輯程式碼
            vm.status = 1;
            vm.catalogIndex = "0-0";
            vm.getProjectDetail();
       }
        //這裡把頁面初始值重新賦值，以重新整理頁面（C進入B）
        //狀態C裡面記錄
       if(vm.$route.meta.isBuffer){
            //自己邏輯程式碼
             sessionStorage.setItem("reload", true);  //重新整理專案列表
             vm.$route.meta.isBuffer = false;         //恢復初始值
             vm.status = 1;
             vm.catalogIndex = "0-0";
             vm.getProjectDetail();
        }
   })
}        

此處判斷 ‘/’ 防止在當前頁面重新整理，判斷 ‘/login’防止當登陸介面呼叫兩次

C元件程式碼：

beforeRouteLeave (to, from, next) {
    if (to.path.indexOf("projectDetail") > -1 && to.query.id && this.isBuffer) {
           //自己邏輯程式碼
            to.meta.keepAlive = false;
            to.meta.isBuffer = true;   
     }
     next()
 }

this.isBuffer表示修改狀態預設false，有修改則改為true，用於重新整理B元件

以上僅共參考，可能有不對的地方，希望指出