vue中keepAlive緩存清除問題的示例分析

小編給大家分享一下vue中keepAlive緩存清除問題的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

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

首先先把坑列出來：

1.

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

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

2.

vm.$destroy()

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

這樣的話，當我們某個頁面需要緩存，我們就把其name加入keepalive數組中，不需要就刪除對應的。這樣就可以實現keepAlive的緩存刪除效果了

以上是“vue中keepAlive緩存清除問題的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！