溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

vue 使某個(gè)組件不被 keep-alive 緩存的方法

發(fā)布時(shí)間：2020-10-19 06:31:23 來(lái)源：腳本之家 閱讀：263 作者：小皮咖 欄目：web開(kāi)發(fā)

提出問(wèn)題

最近在做項(xiàng)目發(fā)現(xiàn)一個(gè)問(wèn)題，當(dāng)我使用了 keep-alive 標(biāo)簽后，進(jìn)入了某個(gè)路由進(jìn)行一系列操作，再點(diǎn)擊瀏覽器后退，再次進(jìn)入剛才的路由，頁(yè)面被操作的數(shù)據(jù)沒(méi)有初始化！

分析問(wèn)題

這是因?yàn)?keep-alive 將路由頁(yè)面緩存，所以該路由沒(méi)有完成整個(gè)生命周期，沒(méi)有 destroyed，因此重新進(jìn)入也沒(méi)有觸發(fā)其他生命周期鉤子，如 created 等。

解決問(wèn)題

（1）. 查看官方文檔

當(dāng)組件在 keep-alive 內(nèi)被切換，它的 activated 和 deactivated 這兩個(gè)生命周期鉤子函數(shù)將會(huì)被對(duì)應(yīng)執(zhí)行。

include - 字符串或正則表達(dá)式。只有匹配的組件會(huì)被緩存。

exclude - 字符串或正則表達(dá)式。任何匹配的組件都不會(huì)被緩存。

<!-- 逗號(hào)分隔字符串 -->
<keep-alive include="a,b">
 <component :is="view"></component>
</keep-alive>
<!-- 正則表達(dá)式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
 <component :is="view"></component>
</keep-alive>
<!-- 數(shù)組 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
 <component :is="view"></component>
</keep-alive>

匹配首先檢查組件自身的 name 選項(xiàng)，如果 name 選項(xiàng)不可用，則匹配它的局部注冊(cè)名稱(chēng) (父組件 components 選項(xiàng)的鍵值)。匿名組件不能被匹配。

（2）. 監(jiān)聽(tīng)路由變化

使用 watch 監(jiān)聽(tīng)路由變化，但是我發(fā)現(xiàn)監(jiān)聽(tīng)路由只有在組件被 keep-alive 包裹時(shí)才生效，未包裹時(shí)不生效，原因不明，理解的小伙伴請(qǐng)留言告訴我！

watch: {
 '$route' (to, from) {
   // 對(duì)路由變化作出響應(yīng)...
  }
}

beforeRouteUpdate 這個(gè)鉤子目前我發(fā)現(xiàn)還不能用，不知道哪里出錯(cuò)。

 beforeRouteUpdate (to, from, next) {
  // react to route changes...
  // don't forget to call next()
 }

以上這篇vue 使某個(gè)組件不被 keep-alive 緩存的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀(guā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)容。

AI
助
手