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不生效
正確寫法
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開(kāi)發(fā)動(dòng)態(tài)刷新Echarts組件的教程詳解
這篇文章主要介紹了使用Vue開(kāi)發(fā)動(dòng)態(tài)刷新Echarts組件的教程詳解,需要的朋友可以參考下2018-03-03
在開(kāi)發(fā)Vue項(xiàng)目的時(shí)候,有時(shí)需要使用一些非ES6格式的沒(méi)有export的js庫(kù),下面這篇文章主要給大家介紹了關(guān)于Vue中引入第三方JS庫(kù)的詳細(xì)步驟,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了Vue觸發(fā)式全局組件構(gòu)建的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
vue路由前進(jìn)后退動(dòng)畫效果的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue路由前進(jìn)后退動(dòng)畫效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-12-12
應(yīng)用provide與inject刷新Vue頁(yè)面方法
這篇文章主要介紹了應(yīng)用provide與inject刷新Vue頁(yè)面的兩種方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，多多進(jìn)步，祝大家早日升職加薪2021-09-09
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)聊天框發(fā)送表情，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
vue動(dòng)態(tài)路由加載時(shí)出現(xiàn)Cannot?find?module?xxx問(wèn)題
這篇文章主要介紹了vue動(dòng)態(tài)路由加載時(shí)出現(xiàn)Cannot?find?module?xxx問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了詳解vue 組件的實(shí)現(xiàn)原理，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2020-11-11
這篇文章主要介紹了如何修改vuex里面的數(shù)據(jù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要介紹了vue-i18n實(shí)現(xiàn)中英文切換的方法，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07