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