keep-alive include和exclude無(wú)效問(wèn)題及解決

更新時(shí)間：2023年11月06日 10:18:23 作者：優(yōu)秀的金大大

這篇文章主要介紹了keep-alive include和exclude無(wú)效問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

keep-alive include和exclude無(wú)效

include：使該標(biāo)簽作用于所有name屬性的值跟此標(biāo)簽 include的屬性值一致的vue頁(yè)面
exclude：使該標(biāo)簽不作用于所有name屬性的值跟此標(biāo)簽 exclude的屬性值一致的vue頁(yè)面

然后我就掉進(jìn)坑里了，配置了一堆路由的name?。。。?！無(wú)效?。?！

使用include/exclude 屬性需要給所有vue類的name賦值（注意不是給route的name賦值）

否則 include/exclude不生效

正確寫(xiě)法

export default {
 name:'a', // include 或 exclude所使用的name
 data () {
 return{
    }
  },
}

路由

   // 保持 name為a和b的組件
   <keep-alive include="a,b">
        <router-view/>
   </keep-alive>

vue2.0版本后，keep-alive內(nèi)置組件已經(jīng)封裝了兩個(gè)屬性，

include和exclude表示那些組件需要緩存那些組件不需要緩存

用法

大致如下：

<keep-alive include="test-keep-alive">
  <!-- 將緩存name為test-keep-alive的組件 -->
  <component></component>
</keep-alive>
 
<keep-alive include="a,b">
  <!-- 將緩存name為a或者b的組件，結(jié)合動(dòng)態(tài)組件使用 -->
  <component :is="view"></component>
</keep-alive>
 
<!-- 使用正則表達(dá)式，需使用v-bind -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>
 
<!-- 動(dòng)態(tài)判斷 -->
<keep-alive :include="includedComponents">
  <router-view></router-view>
</keep-alive>
 
<keep-alive exclude="test-keep-alive">
  <!-- 將不緩存name為test-keep-alive的組件 -->
  <component></component>
</keep-alive>

另外：

activated,deactivated這兩個(gè)生命周期函數(shù)一定是要在使用了keep-alive組件后才會(huì)有的，否則則不存在

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue.set() (this.$set)的用法及說(shuō)明
這篇文章主要介紹了vue.set() (this.$set)的用法及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
vue-element-admin如何設(shè)置默認(rèn)語(yǔ)言
這篇文章主要介紹了vue-element-admin如何設(shè)置默認(rèn)語(yǔ)言，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
如何一步步基于element-ui封裝查詢組件
這篇文章主要給大家介紹了關(guān)于如何一步步基于element-ui封裝查詢組件的相關(guān)資料,本文通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue.js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2021-10-10
Vue表單提交點(diǎn)擊事件只允許點(diǎn)擊一次的實(shí)例
這篇文章主要介紹了Vue表單提交點(diǎn)擊事件只允許點(diǎn)擊一次的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-10-10
vue2.0實(shí)現(xiàn)前端星星評(píng)分功能組件實(shí)例代碼
本文通過(guò)實(shí)例代碼給大家介紹了vue2.0實(shí)現(xiàn)前端星星評(píng)分功能組件，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2018-02-02
vue制作toast組件npm包示例代碼
這篇文章主要介紹了vue制作一個(gè)toast組件npm包,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-10-10
Vue中的事件處理詳情
這篇文章主要介紹了Vue中的事件處理詳情，文章通過(guò)給按鈕綁定一個(gè)?click?事件展開(kāi)詳細(xì)內(nèi)容介紹，需要的小伙伴可以參考一下
2022-05-05
Vue中如何使用Map鍵值對(duì)傳參詳析
最近在做一個(gè)vue的項(xiàng)目,碰到一點(diǎn)關(guān)于Map鍵值對(duì)傳參的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于Vue中如何使用Map鍵值對(duì)傳參的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-08-08
vue3+ts中ref與reactive指定類型實(shí)現(xiàn)示例
這篇文章主要為大家介紹了vue3+ts中ref及reactive如何指定類型的實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-06-06
vue canvas繪制矩形并解決由clearRec帶來(lái)的閃屏問(wèn)題
這篇文章主要介紹了vue canvas繪制矩形并解決由clearRec帶來(lái)的閃屏問(wèn)題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-09-09