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

Posted on by

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緩存清除問題案例詳解的文章就介紹到這瞭,更多相關vue keepAlive緩存清除問題內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：