vue keep-alive 動態(tài)刪除組件緩存的例子
更新時間：2019年11月04日 17:06:09 作者：Ligouhi
今天小編就為大家分享一篇vue keep-alive 動態(tài)刪除組件緩存的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
業(yè)務(wù)需求： 切換tab頁標(biāo)簽的時候（路由前進的時候），緩存當(dāng)前組件數(shù)據(jù)，關(guān)閉tab頁標(biāo)簽的時候清除組件緩存。
實現(xiàn)：
1、先在store的state里面設(shè)置一個要緩存數(shù)組
2、在進到子頁面的時候，更新store的數(shù)組，把將要緩存組件的name(注意：是組件的name，并不是路由的name)，裝進數(shù)組
3、當(dāng)前組件的route-view,外層包裹keep-alive，include用你從倉庫里面取出來的數(shù)組
4、關(guān)閉標(biāo)簽頁(也就是后退路由的時候)，清空store里的數(shù)組
總結(jié)：通過動態(tài)的設(shè)置include（要緩存的組件）的數(shù)組，來動態(tài)的控制組件是否緩存
以上這篇vue keep-alive 動態(tài)刪除組件緩存的例子就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹一下如何在Vue3中實現(xiàn)自定義指令，文中的示例代碼講解詳細(xì)，具有一定的借鑒價值，需要的同學(xué)可以參考一下2022-07-07
Vue 關(guān)閉當(dāng)前頁、關(guān)閉當(dāng)前標(biāo)簽tagsView的實現(xiàn)方法
這篇文章主要介紹了Vue 關(guān)閉當(dāng)前頁、關(guān)閉當(dāng)前標(biāo)簽tagsView,主要有兩種方式，一種是在vue頁面直接實現(xiàn)，另一種在js文件中寫自定義函數(shù)，在vue頁面中調(diào)用，本文通過實例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2022-08-08
Vue中Layout內(nèi)部布局el-row、el-col的實現(xiàn)
layout是一種非常方便的布局方式,本文主要介紹了Vue中Layout內(nèi)部布局el-row、el-col的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2024-07-07
Vue3與TS的聯(lián)合是大趨勢,下面這篇文章主要給大家介紹了關(guān)于用vite簡單搭建ts+vue3全家桶的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)拖拽式分割布局，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
vue實現(xiàn)滾動條下滑時隱藏導(dǎo)航欄,上滑時顯示導(dǎo)航欄功能
這篇文章主要介紹了vue實現(xiàn)滾動條下滑時隱藏導(dǎo)航欄,上滑時顯示導(dǎo)航欄,本文通過實例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07
這篇文章主要介紹了vue項目的訪問端口及其設(shè)置方式，具有很好的參考價值，希望對大家有所幫助。2022-10-10
這篇文章主要介紹了在Vue中使用WebScoket，網(wǎng)絡(luò)的不穩(wěn)定而斷開連接，webscoket不會出現(xiàn)異常，下面就一起進入文章看看吧2022-01-01
這篇文章主要介紹了淺談vue.watch的觸發(fā)條件是什么？具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要為大家詳細(xì)介紹了Vue組件簡易模擬實現(xiàn)購物車，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12