Vue —— keepAlive使用（指定頁面跳轉緩存）

功能邏輯

HomePage ——> OrderList ——> OrderDetail

1、首頁跳轉的訂單清單頁，清單頁重新整理并請求資料；

2、清單頁跳轉到詳情頁，再傳回清單頁不重新整理頁面。

一、設定頁面緩存

如果想要保住頁面不重新整理，首先需要設定路由管理。這裡需求是OrderList頁面不重新整理，那麼在 router.js 設定如下：

{
    name: 'HomePage',
    path: '/HomePage',
    component: () => import('./page/HomePage.vue')
  },
  {
    name: 'OrderList',
    path: '/OrderList',
    component: () => import('./page/OrderList.vue'),
    meta: {
      keepAlive: true
    }
  },
  {
    name: 'OrderDetail',
    path: '/OrderDetail',
    component: () => import('./page/OrderDetail.vue')
  }
           

meta: { keepAlive: true} 設定後頁面保持緩存，無論怎麼通路均顯示第一次緩存的内容。

二、設定頁面跳轉回調方法

這裡回調主要是控制頁面重新整理的行為，是以隻要在OrderList頁面裡處理這方面的邏輯。介紹兩個方法：

1、beforeRouteLeave：頁面跳轉/傳回前的回調方法，可以在離開目前頁面之前做自定義的處理；

2、activated：頁面激活時的回調方法，無論是傳回還是跳轉到此頁面都會觸發。

坑在這裡

一開始在OrderList設定了跳轉回調，如下：

beforeRouteLeave(to, from, next) {
    if (to.name == "OrderDetail") {
      from.meta.keepAlive = true;
    } else {
      from.meta.keepAlive = false;
    }
    next();
  }
           

邏輯上在跳轉到OrderDetail前設定OrderList保持緩存為true，傳回到HomePage前設定OrderList保持緩存為false。理論上沒有問題，但是實際測試時緩存并沒有儲存，從OrderDetail傳回以後資料一片空白。可以知道這樣緩存機制在目前的VUE版本是實作不了的。

解決方案

在上面動态設定緩存狀态行不通的情況下，隻能自定義字段來判斷一下OrderList頁面是否需要重新整理資料。前提就是預設OrderList頁面是有緩存的，就是上面在 router.js 中的設定。

自定義後的OrderList代碼如下：

data() {
    return {
      needRefresh: true //判斷頁面是否需要重新整理
    };
  },
beforeRouteLeave(to, from, next) {
    if (to.name == "OrderDetail") {
      this.needRefresh = false;
    } else {
      this.needRefresh = true;
    }
    next();
  },
 activated() {
   if (this.needRefresh) {
     this.getOrderList();
   }
 },
           

邏輯很簡單，加個needRefresh辨別，在進入/回到不同頁面時設定變量值，在每次頁面喚醒activated回調時判斷是否需要重新整理，根據需要進行處理即可。