寫在前面

一個(gè)web app的實(shí)際使用場景中，有一些情景的交互要求，是記錄用戶的瀏覽狀態(tài)的。最常見的就是在列表頁進(jìn)入詳情頁之后，再返回到列表頁，用戶希望返回到進(jìn)入詳情頁之前的狀態(tài)繼續(xù)操作。但是有些使用場景，用戶又是希望能夠獲取最新的數(shù)據(jù)，例如同級(jí)列表頁之間切換的時(shí)候。

如此，針對(duì)上述兩種使用場景，需要實(shí)現(xiàn)按需讀取頁面緩存。由于SPA應(yīng)用的路由邏輯也是在前端實(shí)現(xiàn)的，因此可以在前端對(duì)路由的邏輯進(jìn)行設(shè)置以實(shí)現(xiàn)所需效果。

使用技術(shù)

總體思路

keep-alive判斷當(dāng)前組件是否讀取緩存的節(jié)點(diǎn)，在整個(gè)生命周期里面非常靠后，在afterEach之后，基本在組件實(shí)例創(chuàng)建之前。（因此在此之前對(duì)當(dāng)前組件是否讀取緩存進(jìn)行處理都是可行的，我選擇在全局前置守衛(wèi)進(jìn)行處理）

而判斷當(dāng)前組件是否緩存的節(jié)點(diǎn)，則早于組件的beforeRouteLeave鉤子。

基于上述邏輯，本方案解決的邏輯是，對(duì)當(dāng)前打開的頁面進(jìn)行判斷，動(dòng)態(tài)生成需要keepAlive的組件數(shù)組配置，對(duì)有可能需要緩存的先行進(jìn)行緩存，然后在每次路由切換的時(shí)候，再進(jìn)行判斷，按需讀取頁面緩存。

使用kepp-alive進(jìn)行緩存，使用include屬性對(duì)需要緩存的頁面進(jìn)行配置。 由于需要緩存的頁面配置系動(dòng)態(tài)生成，所以使用vuex儲(chǔ)存該配置。 在路由元信息中寫入兩個(gè)配置，一是該路由是否需要緩存，二是從相關(guān)路由進(jìn)入時(shí)才進(jìn)行緩存的特定路由數(shù)組。 在beforeEach進(jìn)行設(shè)置，每次進(jìn)入路由之前，對(duì)進(jìn)入的路由及其所有父級(jí)路由進(jìn)行判斷，若需要緩存且命中特定路由數(shù)組，則將相關(guān)路由添加至緩存配置文件中；若不符合，則將相關(guān)路由刪除。（此步驟實(shí)現(xiàn)了路由切換時(shí)，需要?jiǎng)t讀取緩存，不需要?jiǎng)t重新獲取數(shù)據(jù)。） 使用全局mixin，進(jìn)入相關(guān)組件之前，對(duì)當(dāng)前路由進(jìn)行判斷，如果需要緩存的則將該路由添加至緩存配置中。（此步驟實(shí)現(xiàn)了緩存當(dāng)前打開的需要緩存的頁面。）

具體實(shí)現(xiàn)

1. 使用include屬性控制路由緩存

此處需要注意的是，include匹配首先檢查組件自身的 name 選項(xiàng)，如果 name 選項(xiàng)不可用，則匹配它的局部注冊名稱 (父組件 components 選項(xiàng)的鍵值)。匿名組件不能被匹配。

但是vue-router的環(huán)境下，是沒有局部注冊名稱的，只能為組件補(bǔ)全name屬性。

因此，請務(wù)必給組件添加 name 選項(xiàng)，否則匿名組件將全部應(yīng)用緩存。

<keep-alive :include="$store.state.cachedRouteNames"> <router-view /></keep-alive>

2. 添加全局路由緩存配置