完美解決vue之keep-alive頁面緩存問題

一：摘要：使用vue開發單頁面應用，如何解決頁面緩存問題（尤其在手機端），如何才能做到 新打開的頁面 獲取最新數據，返回上一個頁面獲取最新的緩存頁面數據？

二：頁面打開和緩存流程：

三：為了解決上面的緩存流程問題，需要了解的知識：

1：keep-alive 組件； 說明： 包裹動態組件時，會緩存不活動的組件實例，而不是銷燬它們；

• include 屬性 說明： 只要include包含組件name則緩存下來； 官方解釋：允許組件有 條件地緩存。二者都可以用逗號分隔字符串、正則表達式或一個數組來表示
• exclude 屬性 說明： 只要exclude包含組件name則不緩存下來； 官方解釋：組件有條件地緩存。二者都可以用逗號分隔字符串、正則表達式或一個數組來表示

2： 路由配置參數中的 scrollBehavior 滾動行為，主要記錄滾動位置的，我們不僅可以利用來記錄緩存頁面滾動的位置，還可以利用 savedPosition 知道頁面到底是前進 還是 後退

3：vue 生命週期 中的 2個鉤子 activated 和 deactivated

activated keep-alive 組件激活時調用 下面簡單講解下，建議看vue官方文檔細緻瞭解下

deactivated keep-alive 組件停用時調用 下面簡單講解下，建議看vue官方文檔細緻瞭解下

啥意思呢？如果不使用 keep-alive，我們經常在 created 中執行頁面打開前的動作，比如：ajax獲取數據；

不使用 keep-alive 打開頁面 執行 created

使用 keep-alive 打開頁面 執行 created 之後又會執行 activated ，如果此時返回上一頁（就是緩存的頁面）那麼只執行 activated

再解釋下: 就是使用了 keep-alive 打開新頁面會執行 created+activated 2個鉤子 ，如果返回到緩存的頁面，此時緩存頁面不執行 created了，如果此時你業務需要返回 alert(1),那麼這個 alert(1),只能放在activated中，放在created中無效；

四：互聯網上我也看了有好幾個解決方案，但都有問題，不是最佳方案，我研究vue源碼後總結了完美方案，寫出來，方便大家開發項目，互相學習+吐槽；

五：下面就用代碼來演示步驟

第一步：router.js 新建路由

第二步：打開 APP.vue 頁面 注意：這裡的 cachePageName 一定是組件name，不是路由name（必須每個組件都加上name，組件name必須寫成和路由name一樣）

• html代碼

• js代碼

第三步：這裡需要用到vuex，如果沒安裝的請自行安裝vuex，這裡不做解釋；

第四步：修改路由中 scrollBehavior 滾動行為，在前進 和 後退 中動態刪除 和 新增需要緩存的組件

第五步：關注我們，學習開發，獲取更多幹貨教程