Vue緩存 菜單、多Tab解決方案

1.需求

在項目開發中，前端不免遇到須要路由緩存的需求。在以前一個React項目中，查詢各類資料和插件後，瞭解到React要配合React-router進行路由緩存，會有不少意想不到的問題。因此在React項目中，咱們都避免接收到須要路由緩存的需求。

最近在開發一個vue項目中，因爲vue原生有Keep-alive組件以及include，exclude的各類api來實現路由緩存。因此咱們決定大膽的接下這個坑。

2.踩坑

一開始咱們也是直接用keep-alive包裹住router-view  加上路由的fullPath做爲router-view的key值，而後用include定義須要緩存的組件。

以及在路由定製的meta裏面定義keepalive是否須要緩存字段來處理緩存

對於通常的項目，其實這樣解決緩存已經能夠了。可是咱們是對應B端的管理系統，會有菜單頁，Tab頁，一個路由可能在不一樣的狀況會須要緩存以及不須要緩存兩種狀況。在動態改變keepaliveList或者$route.meta.keepalive後，並無觸發組件緩存的銷燬以及再緩存。因此咱們只能變換方法來實現。

3.解決思路--清理詳情頁緩存

咱們的項目會有多個Tab的形式，相似於element-ui的tabs組件。

咱們在相同tab下的路由配置了相同的pageKey表明在一個tab下的路由組件。

按照上面的配置，組件A,B是在一個tab下，C是在另外一個tab下的。

在用keep-alive包裹住router-view後，能夠實現切換不一樣tab，切換路由，緩存頁面，可是在同一個tab下從列表跳到詳情頁，咱們須要詳情頁每次進入都須要清楚緩存從新查詢數據。介於有這兩種須要不一樣緩存效果的組件，咱們在路由定義時多加了一個noCache字段，定義了這個字段的路由，代表在不一樣pageKey路由(表示不一樣tab)之間切換時，須要緩存，在相同pageKey(表示同一tab)路由之間切換時，不須要緩存並清理。

在查詢資料後，瞭解到vue把緩存組件存儲到$vnode.parent.componentInstance.cache中，咱們想到了一個用vue路由鉤子清理緩存的一個方法。

以上代碼是在第一次打開詳情頁返回到列表頁時，進入beforeRouteLeave鉤子函數，調用clearCache方法清除詳情頁的緩存。

4.解決思路--關閉tab清理緩存

如今還有一個問題是每一個tab會有關閉按鈕，在點擊一個tab的關閉按鈕後，應該清除該tab同一個pageKey的全部組件緩存。這裏咱們在點擊關閉按鈕事件中設置vuex全局變量在全局beforeRouteLeave的判斷里加上該判斷，若是全局變量變化說明點擊了關閉按鈕，而後再clearCache方法內部清除相同pageKey的組件cache列表。

5.解決思路--返回列表緩存查詢條件並重查數據

到這裏其實大部分的緩存問題已經解決了，可是咱們可愛的產品爸爸，忽然給咱們提了一個新的需求，在詳情頁跳轉到列表頁的時候，須要列表頁的查詢條件存在，而且重查一次查詢。剛開始咱們決定考慮新的解決思路來清理列表頁的緩存，而且存儲下列表頁的查詢條件。因爲咱們列表頁不會設置noCache字段，因此查詢列表的條件緩存是存在的，咱們只須要從新調一次查詢接口就能夠了。

根據這個思路，咱們在詳情頁跳轉回列表頁時給詳情頁meta對象新增一個backSearch字段，在beforeRouteLeave中若是捕獲到from.meta.backSearch，則刪除這個屬性而且設置to.meta.backSearch=true，再設置一個全局actived緩存鉤子若是檢測到該路由的meta.backSearch字段，則自動調用組件定義的myOption方法實則爲該組件的查詢方法

6.解決思路--url隨機數清理緩存

以上大概解決了業務提的全部緩存需求。可是在最近的開發中，因爲用戶的騷操做，又爆發出了緩存的又一bug。

咱們清理詳情頁緩存的觸發條件是，相同pageKey之間跳轉的狀況，例如詳情頁跳轉回列表頁，可是用戶的一次操做是進入了詳情頁直接點擊菜單進入了其餘頁面，而後點列表菜單從新進入列表頁，路由全在不一樣pageKey的狀況下跳轉，並無觸發詳情頁緩存邏輯。

在注意到咱們的router-view key字段是$route.fullPath,因此咱們決定給url加上隨機數來解決這個問題。

7.結語

目前我沒找尋到一個業界比較公認的緩存解決辦法，咱們也在探索之中。咱們的方法可能比較繁瑣，但目前能解決咱們的開發需求，若是有大佬能給咱們提一些寶貴的意見，咱們會很是感謝。