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

更新時(shí)間：2018年09月21日 11:00:44 作者：小皮咖

今天小編就為大家分享一篇vue 使某個(gè)組件不被 keep-alive 緩存的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

提出問(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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

VueX瀏覽器刷新如何實(shí)現(xiàn)保存數(shù)據(jù)
這篇文章主要介紹了VueX瀏覽器刷新如何實(shí)現(xiàn)保存數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
vue.js整合mint-ui里的輪播圖實(shí)例代碼
這篇文章主要介紹了vue.js整合mint-ui里的輪播圖的方法,首先我們需要初始化vue項(xiàng)目，然后安裝mint-ui。具體內(nèi)容詳情大家通過(guò)學(xué)習(xí)
2017-12-12
淺談Vue3.0新版API之composition-api入坑指南
這篇文章主要介紹了Vue3.0新版API之composition-api入坑指南，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-04-04
Vue頁(yè)面手動(dòng)刷新,實(shí)現(xiàn)導(dǎo)航欄激活項(xiàng)還原到初始狀態(tài)
這篇文章主要介紹了Vue頁(yè)面手動(dòng)刷新,實(shí)現(xiàn)導(dǎo)航欄激活項(xiàng)還原到初始狀態(tài)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08
vue-cli單頁(yè)應(yīng)用改成多頁(yè)應(yīng)用配置詳解
本篇文章主要介紹了vue-cli單頁(yè)應(yīng)用改成多頁(yè)應(yīng)用配置詳解，具有一定的參考價(jià)值，有興趣的可以了解一下
2017-07-07
vue3?element?plus按需引入最優(yōu)雅的用法實(shí)例
這篇文章主要給大家介紹了關(guān)于vue3?element?plus按需引入最優(yōu)雅的用法,以及關(guān)于Element-plus按需引入的一些坑,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
2022-03-03
Vue循環(huán)遍歷選項(xiàng)賦值到對(duì)應(yīng)控件的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue-循環(huán)遍歷選項(xiàng)賦值到對(duì)應(yīng)控件的實(shí)現(xiàn)方法啊，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-06-06
Vue3使用element-plus實(shí)現(xiàn)彈窗效果
本文主要介紹了Vue3使用element-plus實(shí)現(xiàn)彈窗效果，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
一文搞懂vue中provide和inject實(shí)現(xiàn)原理對(duì)抗平庸
這篇文章主要為大家介紹了vue中provide和inject實(shí)現(xiàn)原理的深入理解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-04-04
詳解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Vue.js的指令是以v-開(kāi)頭的，它們作用于HTML元素，指令提供了一些特殊的特性。這篇文章主要介紹了Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on 的相關(guān)知識(shí),需要的朋友可以參考下
2018-10-10