vue keepAlive緩存清除問題案例詳解

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

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

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

首先先把坑列出來：

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

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

vm.$destroy()

當(dāng)想到把已有的緩存去掉，我估計(jì)大多數(shù)人第一反應(yīng)都是想著怎么把緩存刪掉，于是乎我也嘗試想辦法把緩存刪掉。然后調(diào)用了vue的銷毀方法。當(dāng)銷毀后你會(huì)很開心的發(fā)現(xiàn)實(shí)現(xiàn)了！緩存刪掉了~ 于是乎你就以為改好了，跑去繼續(xù)開發(fā)別的東西。突然某一天你發(fā)現(xiàn)，誒？我這個(gè)頁面怎么不緩存了？經(jīng)過一番排查發(fā)現(xiàn)了調(diào)用過$destroy()的頁面就不會(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)改變所需緩存頁面。include所接受的為組件的name（此處我嫌命名麻煩，直接用path命名了，其實(shí)并不是使用path）

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

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

您可能感興趣的文章:

相關(guān)文章

vue實(shí)現(xiàn)自定義"模態(tài)彈窗"組件實(shí)例代碼
頁面中會(huì)有很多時(shí)候需要彈窗提示,我們可以寫一個(gè)彈窗組件,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)自定義"模態(tài)彈窗"組件的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2021-12-12
vue點(diǎn)擊Dashboard不同內(nèi)容跳轉(zhuǎn)到同一表格的實(shí)例
這篇文章主要介紹了vue點(diǎn)擊Dashboard不同內(nèi)容跳轉(zhuǎn)到同一表格的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
Vue3 appear 失效的問題及如何使用 appear
appear 是一個(gè)在元素默認(rèn)被顯示的情況下調(diào)用進(jìn)入動(dòng)畫效果,使得元素在這種初次渲染情況下執(zhí)行進(jìn)入動(dòng)畫的屬性,最近在學(xué)習(xí)vue3的動(dòng)畫時(shí)遇到appear無法生效的問題,本文給大家詳細(xì)講解,感興趣的朋友一起看看吧
2023-10-10
Vue3中關(guān)于ref和reactive的問題
這篇文章主要介紹了Vue3中關(guān)于ref和reactive的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue.js的狀態(tài)管理vuex中store的使用詳解
今天小編就為大家分享一篇vue.js的狀態(tài)管理vuex中store的使用詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
vue2.0如何借用vue-pdf實(shí)現(xiàn)在線預(yù)覽pdf文件
這篇文章主要介紹了vue2.0如何借用vue-pdf實(shí)現(xiàn)在線預(yù)覽pdf文件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue項(xiàng)目中使用WebUploader實(shí)現(xiàn)文件上傳的方法
WebUploader是由 Baidu WebFE(FEX) 團(tuán)隊(duì)開發(fā)的一個(gè)簡單的以 HTML5為主， FLASH為輔的現(xiàn)代文件上傳組件。這篇文章主要介紹了在Vue項(xiàng)目中使用WebUploader實(shí)現(xiàn)文件上傳,需要的朋友可以參考下
2019-07-07
學(xué)習(xí)Vite的原理
這篇文章主要介紹了Vite的原理，Vite是一個(gè)更輕、更快的web應(yīng)用開發(fā)工具，面向現(xiàn)代瀏覽，Vite創(chuàng)建的項(xiàng)目是一個(gè)普通的Vue3應(yīng)用，相比基于Vue-cli創(chuàng)建的應(yīng)用少了很多配置文件和依賴，下面基于Vite相關(guān)資料內(nèi)容，需要的朋友可以參考一下
2022-02-02
Vue3中使用defineCustomElement 定義組件詳解
這篇文章主要為大家介紹了Vue3中使用defineCustomElement 定義組件詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-10-10
vue css 引入asstes中的圖片無法顯示的四種解決方法
這篇文章主要介紹了vue css 引入asstes中的圖片無法顯示的幾種解決方案,本文給出了四種解決方法，每種方法給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-03-03