快捷導(dǎo)航

vue keepAlive緩存清除問(wèn)題案例詳解

更新時(shí)間：2021年09月08日 15:31:34 作者：王的劍鞘&wkq

這篇文章主要介紹了vue keepAlive緩存清除問(wèn)題案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下

vue項(xiàng)目中經(jīng)常會(huì)用到keepalive來(lái)做緩存，在應(yīng)付基本要求上可以說(shuō)非常方便。但是遇到同一個(gè)頁(yè)面，根據(jù)條件不同，分別緩存或者不緩存，就有些麻煩了。

首先先把坑列出來(lái)：

1.

<keep-alive v-if="xxx">
          <router-view />
</keep-alive>
<keep-alive v-else>
          <router-view />
</keep-alive>

網(wǎng)上很多都是這種方法，用了這種方法，已緩存的東西是沒(méi)法刪掉的，其實(shí)這個(gè)方法是把緩存頁(yè)面和不緩存頁(yè)面完全分成了兩個(gè)組件展示，雖然一般情況下看著是那么回事，其實(shí)就是根據(jù)你的條件，不同時(shí)候展示不同的組件來(lái)看。

2.

vm.$destroy()

當(dāng)想到把已有的緩存去掉，我估計(jì)大多數(shù)人第一反應(yīng)都是想著怎么把緩存刪掉，于是乎我也嘗試想辦法把緩存刪掉。然后調(diào)用了vue的銷毀方法。當(dāng)銷毀后你會(huì)很開(kāi)心的發(fā)現(xiàn)實(shí)現(xiàn)了！緩存刪掉了~ 于是乎你就以為改好了，跑去繼續(xù)開(kāi)發(fā)別的東西。突然某一天你發(fā)現(xiàn)，誒？我這個(gè)頁(yè)面怎么不緩存了？經(jīng)過(guò)一番排查發(fā)現(xiàn)了調(diào)用過(guò)$destroy()的頁(yè)面就不會(huì)再緩存了。。

最后我的解決方案：

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，動(dòng)態(tài)改變所需緩存頁(yè)面。include所接受的為組件的name（此處我嫌命名麻煩，直接用path命名了，其實(shí)并不是使用path）

這樣的話，當(dāng)我們某個(gè)頁(yè)面需要緩存，我們就把其name加入keepalive數(shù)組中，不需要就刪除對(duì)應(yīng)的。這樣就可以實(shí)現(xiàn)keepAlive的緩存刪除效果了

到此這篇關(guān)于vue keepAlive緩存清除問(wèn)題案例詳解的文章就介紹到這了,更多相關(guān)vue keepAlive緩存清除問(wèn)題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue elementUI select下拉框設(shè)置默認(rèn)值(賦值)失敗的解決
這篇文章主要介紹了vue elementUI select下拉框設(shè)置默認(rèn)值(賦值)失敗的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
使用 Vue 綁定單個(gè)或多個(gè) Class 名的實(shí)例代碼
這篇文章主要介紹了使用 Vue 綁定單個(gè)或多個(gè) Class 名的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2018-01-01
前端Vue自定義地址展示地址選擇地址管理組件的示例詳解
這篇文章主要介紹了前端Vue自定義地址展示地址選擇地址管理組件的示例詳解,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-06-06
Vue+Openlayer中使用select選擇要素的實(shí)現(xiàn)代碼
本文通過(guò)實(shí)例代碼給大家介紹Vue+Openlayer中使用select選擇要素，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2021-08-08
vue中改變滾動(dòng)條樣式的方法
這篇文章主要介紹了vue中改變滾動(dòng)條樣式的方法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03
Vue數(shù)據(jù)劫持詳情介紹
這篇文章主要介紹了Vue數(shù)據(jù)劫持詳情介紹，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，感興趣的小伙伴可以參考一下，希望對(duì)你的學(xué)習(xí)有所幫助
2022-08-08
vue前臺(tái)顯示500和405錯(cuò)誤的解決(springboot為后臺(tái))
這篇文章主要介紹了vue前臺(tái)顯示500和405錯(cuò)誤的解決(springboot為后臺(tái))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
vue3-print-nb實(shí)現(xiàn)頁(yè)面打印(含分頁(yè)打印)示例代碼
大多數(shù)后臺(tái)系統(tǒng)中都存在打印的需求,在有打印需求時(shí),對(duì)前端來(lái)說(shuō)當(dāng)然是直接打印頁(yè)面更容易,下面這篇文章主要給大家介紹了關(guān)于vue3-print-nb實(shí)現(xiàn)頁(yè)面打印(含分頁(yè)打印)的相關(guān)資料,需要的朋友可以參考下
2024-01-01
Vue入門實(shí)戰(zhàn)之天氣預(yù)報(bào)
這篇文章主要為大家詳細(xì)介紹了Vue入門實(shí)戰(zhàn)之天氣預(yù)報(bào)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
Vue3新屬性之css中使用v-bind的方法（v-bind?in?css）
這篇文章主要介紹了Vue3新屬性css中使用v-bind（v-bind?in?css）的方法，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-01-01