您好,登錄后才能下訂單哦!
<keep-alive>是Vue的內(nèi)置組件,能在組件切換過程中將狀態(tài)保留在內(nèi)存中,防止重復(fù)渲染DOM
<keep-alive> 包裹動(dòng)態(tài)組件時(shí),會(huì)緩存不活動(dòng)的組件實(shí)例,而不是銷毀它們。和 <transition>
相似,<keep-alive>是一個(gè)抽象組件:它自身不會(huì)渲染一個(gè) DOM 元素,也不會(huì)出現(xiàn)在父組件鏈中。
方法1
include: 字符串或正則表達(dá)式。只有匹配的組件會(huì)被緩存。
exclude: 字符串或正則表達(dá)式。任何匹配的組件都不會(huì)被緩存。
exclude優(yōu)先級(jí)大于include
<keep-alive include="a,b"> <!-- 將緩存name為a或者b的組件,結(jié)合動(dòng)態(tài)組件使用 --> <component :is="view"></component> </keep-alive>
方法2 (結(jié)合berforeRouteEnter,緩存部分頁面)
緩存的頁面 created 會(huì)執(zhí)行只有一次,activated每次都會(huì)執(zhí)行 , created 里面做 第一次 isFirstEnter = true(由于頁面被緩存,所以一直生效),之后再activated 里面做判斷 只有 “不是返回回來的” 和 “第一次進(jìn)來的” 就刷新數(shù)據(jù), 并且要在下面 都設(shè)為false, 以免緩存各標(biāo)識(shí)不對(duì),在進(jìn)入 “列表頁” 時(shí),通過router鉤子函數(shù) beforeRouteEnter做判斷,詳情頁過來的設(shè) isBack 為true,即不刷新頁面
以上就是全部相關(guān)知識(shí)點(diǎn)內(nèi)容,感謝大家對(duì)億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。