提出問(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è)名稱 (父組件 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è)參考，也希望大家多多支持錯(cuò)新站長(zhǎng)站。