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