vue keepAlive緩存清除問題案例詳解
vue項目中經(jīng)常會用到keepalive來做緩存，在應(yīng)付基本要求上可以說非常方便。但是遇到同一個頁面，根據(jù)條件不同，分別緩存或者不緩存，就有些麻煩了。
首先先把坑列出來：
1.
<keep-alive v-if="xxx">
<router-view />
</keep-alive>
<keep-alive v-else>
<router-view />
</keep-alive>
網(wǎng)上很多都是這種方法，用了這種方法，已緩存的東西是沒法刪掉的，其實這個方法是把緩存頁面和不緩存頁面完全分成了兩個組件展示，雖然一般情況下看著是那么回事，其實就是根據(jù)你的條件，不同時候展示不同的組件來看。
2.
當(dāng)想到把已有的緩存去掉，我估計大多數(shù)人第一反應(yīng)都是想著怎么把緩存刪掉，于是乎我也嘗試想辦法把緩存刪掉。然后調(diào)用了vue的銷毀方法。當(dāng)銷毀后你會很開心的發(fā)現(xiàn)實現(xiàn)了！緩存刪掉了~ 于是乎你就以為改好了，跑去繼續(xù)開發(fā)別的東西。突然某一天你發(fā)現(xiàn)，誒？ 我這個頁面怎么不緩存了？ 經(jīng)過一番排查 發(fā)現(xiàn)了調(diào)用過$destroy()的頁面就不會再緩存了。。
最后我的解決方案：
Template
<keep-alive :include="keepAlive.join(',')">
<router-view />
</keep-alive>
vuex
keepAlive: [
'/joinManage/register/add-step1',
'/joinManage/register/add-step2',
'/joinManage/register/add-step3',
'/joinManage/config/add-step1',
'/joinManage/config/add-step2',
'/joinManage/config/add-step3',
'/joinManage/config/add-step4',
'/joinManage/config/add-step5',
],
利用include+vuex，動態(tài)改變所需緩存頁面。include所接受的為組件的name（此處我嫌命名麻煩，直接用path命名了， 其實并不是使用path）
這樣的話，當(dāng)我們某個頁面需要緩存，我們就把其name加入keepalive數(shù)組中，不需要就刪除對應(yīng)的。這樣就可以實現(xiàn)keepAlive的緩存刪除效果了
到此這篇關(guān)于vue keepAlive緩存清除問題案例詳解的文章就介紹到這了,更多相關(guān)vue keepAlive緩存清除問題內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue elementUI select下拉框設(shè)置默認(rèn)值(賦值)失敗的解決
這篇文章主要介紹了vue elementUI select下拉框設(shè)置默認(rèn)值(賦值)失敗的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了使用 Vue 綁定單個或多個 Class 名的實例代碼，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-01-01
這篇文章主要介紹了前端Vue自定義地址展示地址選擇地址管理組件的示例詳解,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06
Vue+Openlayer中使用select選擇要素的實現(xiàn)代碼
本文通過實例代碼給大家介紹Vue+Openlayer中使用select選擇要素，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-08-08
這篇文章主要介紹了vue中改變滾動條樣式的方法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要介紹了Vue數(shù)據(jù)劫持詳情介紹，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，感興趣的小伙伴可以參考一下，希望對你的學(xué)習(xí)有所幫助2022-08-08
vue前臺顯示500和405錯誤的解決(springboot為后臺)
這篇文章主要介紹了vue前臺顯示500和405錯誤的解決(springboot為后臺)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
vue3-print-nb實現(xiàn)頁面打印(含分頁打印)示例代碼
大多數(shù)后臺系統(tǒng)中都存在打印的需求,在有打印需求時,對前端來說當(dāng)然是直接打印頁面更容易,下面這篇文章主要給大家介紹了關(guān)于vue3-print-nb實現(xiàn)頁面打印(含分頁打印)的相關(guān)資料,需要的朋友可以參考下2024-01-01
這篇文章主要為大家詳細(xì)介紹了Vue入門實戰(zhàn)之天氣預(yù)報，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
Vue3新屬性之css中使用v-bind的方法（v-bind?in?css）
這篇文章主要介紹了Vue3新屬性css中使用v-bind（v-bind?in?css）的方法，本文結(jié)合實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-01-01