vue keep-alive 動(dòng)態(tài)刪除組件緩存的例子
業(yè)務(wù)需求： 切換tab頁(yè)標(biāo)簽的時(shí)候（路由前進(jìn)的時(shí)候），緩存當(dāng)前組件數(shù)據(jù)，關(guān)閉tab頁(yè)標(biāo)簽的時(shí)候清除組件緩存。
實(shí)現(xiàn)：
1、先在store的state里面設(shè)置一個(gè)要緩存數(shù)組
2、在進(jìn)到子頁(yè)面的時(shí)候，更新store的數(shù)組，把將要緩存組件的name(注意：是組件的name，并不是路由的name)，裝進(jìn)數(shù)組
3、當(dāng)前組件的route-view,外層包裹keep-alive，include用你從倉(cāng)庫(kù)里面取出來(lái)的數(shù)組
4、關(guān)閉標(biāo)簽頁(yè)(也就是后退路由的時(shí)候)，清空store里的數(shù)組
總結(jié)：通過(guò)動(dòng)態(tài)的設(shè)置include（要緩存的組件）的數(shù)組，來(lái)動(dòng)態(tài)的控制組件是否緩存
以上這篇vue keep-alive 動(dòng)態(tài)刪除組件緩存的例子就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在vue3+vite創(chuàng)建的項(xiàng)目中使用vuex，要注意的是vite有部分寫(xiě)法和之前的webpack是不同的，這篇文章主要介紹了vue3+vite中使用vuex的具體步驟,需要的朋友可以參考下2022-11-11
vue實(shí)現(xiàn)pdf導(dǎo)出解決生成canvas模糊等問(wèn)題(推薦)
最近公司項(xiàng)目需要，利用vue實(shí)現(xiàn)pdf導(dǎo)出，從而保存到本地打印出來(lái)，說(shuō)起來(lái)好像也很容易，具體要怎么實(shí)現(xiàn)呢？下面小編給大家?guī)?lái)了vue實(shí)現(xiàn)pdf導(dǎo)出解決生成canvas模糊等問(wèn)題，需要的朋友參考下吧2018-10-10
Vue2?this?能夠直接獲取到?data?和?methods?的原理分析
這篇文章主要介紹了Vue2?this能夠直接獲取到data和methods的原理分析，因?yàn)閙ethods里的方法通過(guò)bind指定了this為new?Vue的實(shí)例2022-06-06
雖然 vue-router 4 大多數(shù) API 保持不變，但是在 vue3 中以插件形式存在，所以在使用時(shí)有一定的變化。接下來(lái)就學(xué)習(xí)學(xué)習(xí)它是如何使用的2021-11-11
利用Dectorator分模塊存儲(chǔ)Vuex狀態(tài)的實(shí)現(xiàn)
這篇文章主要介紹了利用Dectorator分模塊存儲(chǔ)Vuex狀態(tài)的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
本篇文章主要介紹了詳解Vue 事件驅(qū)動(dòng)和依賴追蹤 ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
詳解Vue中如何實(shí)現(xiàn)圖片處理與濾鏡效果
Vue.js作為一個(gè)靈活的JavaScript框架,可以很容易地與圖像處理庫(kù)和濾鏡效果庫(kù)集成,以實(shí)現(xiàn)各種圖像處理需求,下面我們就來(lái)學(xué)習(xí)一下vue是如何實(shí)現(xiàn)圖片處理與濾鏡效果的吧2023-10-10
vue3+el-table實(shí)現(xiàn)行列轉(zhuǎn)換
在處理文本數(shù)據(jù)的時(shí)候,我們經(jīng)常會(huì)需要把文本數(shù)據(jù)的行與列進(jìn)行轉(zhuǎn)換操作，這樣更方便查看，本文就詳細(xì)的介紹了vue3+el-table實(shí)現(xiàn)行列轉(zhuǎn)換，感興趣的可以了解一下2021-06-06
Vue2使用TailwindCSS方法及遇到問(wèn)題小結(jié)
Tailwind CSS是一個(gè)全新的、可定制的CSS框架,它提供了一系列的CSS類,用于構(gòu)建現(xiàn)代化的Web界面,這篇文章主要介紹了Vue2使用TailwindCSS方法及遇到問(wèn)題小結(jié),需要的朋友可以參考下2024-03-03
vue 權(quán)限認(rèn)證token的實(shí)現(xiàn)方法
這篇文章主要介紹了vue 權(quán)限認(rèn)證token的實(shí)現(xiàn)方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07