Vue keep-alive 動態(tài)控制頁面緩存(動態(tài)路由可用)

當(dāng)我們不用動態(tài)路由時,可以用官方文檔 keep-alive 的 include 和 exclude,通過組件 name 就可以控制當(dāng)前頁面是否緩存。

在動態(tài)路由的頁面下,事情復(fù)雜了。。
所以我們著重說下這個情況下如何動態(tài)控制緩存。

首先,我們?yōu)榱私o每個不同 /:id 緩存,給<router-view>加了 key

image.png

(網(wǎng)上比較常用的緩存方式)

到這一步,你會發(fā)現(xiàn)每個動態(tài)路由都能很好的緩存了,完美。

但是!!

在我們想動態(tài)清除緩存的時候

我們再給 keep-alive 加 exclude 時,將 $route.fullPath 傳入 exclude 數(shù)組
發(fā)現(xiàn)他不生效。。。

然后去看了文檔。。

image.png

(啊這...)

然后我就在網(wǎng)上找怎么清動態(tài)路由的某個緩存。。找了一天(半天在刷知乎)
看到了這篇文章 https://wanyaxing.com/blog/20180724141008.html
然后自己試了下,確實可以只清掉當(dāng)前url緩存?。?!
附上清除方法

image.png

(這個onlyCleanCache參數(shù)一會有用)

所以我們最核心的問題就可以解決了
那么接下來就是業(yè)務(wù)判斷了

由于我們的業(yè)務(wù)并不只是 A => B => C (假設(shè)B為動態(tài)路由頁)
有的時候會存在 A=> B => C=> A => B => B => B 等等一系列跳轉(zhuǎn)
所以沒有辦法像文章里講的給路由配優(yōu)先級,我就決定在跳轉(zhuǎn)前判斷。

那么問題又來了,如何在進(jìn)入一個頁面前清掉這個頁面的緩存呢?
大部分人都會想到 vue-router 的路由守衛(wèi),我也是這么想的。
我測試了 beforeRouteEnter,然后在 next 的回調(diào)里調(diào)清除緩存方法

舒服了,執(zhí)行的很完美,終于可以算是完善的解決方案了。

總結(jié)一下總流程就是,在跳轉(zhuǎn)到動態(tài)路由之前,帶上一個參數(shù)
動態(tài)路由頁面根據(jù)參數(shù)判斷是否需要清緩存

另外還有一些問題我不確定:
在beforeRouteEnter 清除了緩存,會不會影響性能?

附上代碼

image.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容