快捷導(dǎo)航

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)文章

Vue動(dòng)畫事件詳解及過(guò)渡動(dòng)畫實(shí)例
通過(guò) Vue.js 的過(guò)渡系統(tǒng)，可以在元素從 DOM 中插入或移除時(shí)自動(dòng)應(yīng)用過(guò)渡效果。Vue.js 會(huì)在適當(dāng)?shù)臅r(shí)機(jī)為你觸發(fā) CSS 過(guò)渡或動(dòng)畫，你也可以提供相應(yīng)的 JavaScript 鉤子函數(shù)在過(guò)渡過(guò)程中執(zhí)行自定義的 DOM 操作
2019-02-02
vue3 定義使用全局變量的示例詳解
全局變量（函數(shù)等）可以在任意組件內(nèi)訪問(wèn),可以當(dāng)組件間的傳值使用,這篇文章給大家介紹vue3 定義使用全局變量的示例詳解,感興趣的朋友跟隨小編一起看看吧
2023-10-10
vue.js 中使用（...）運(yùn)算符報(bào)錯(cuò)的解決方法
這篇文章主要介紹了vue.js 中使用（...）運(yùn)算符報(bào)錯(cuò)的解決方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
vue實(shí)現(xiàn)抖音時(shí)間轉(zhuǎn)盤
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)抖音時(shí)間轉(zhuǎn)盤，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-09-09
Vue自定義復(fù)制指令 v-copy功能的實(shí)現(xiàn)
這篇文章主要介紹了Vue自定義復(fù)制指令 v-copy,使用自定義指令創(chuàng)建一個(gè)點(diǎn)擊復(fù)制文本功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-01-01
淺談vue引入css,less遇到的坑和解決方法
下面小編就為大家分享一篇淺談vue引入css,less遇到的坑和解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-01-01
vue中如何使用lodash的debounce防抖函數(shù)
防抖函數(shù) debounce 指的是某個(gè)函數(shù)在某段時(shí)間內(nèi),無(wú)論觸發(fā)了多少次回調(diào),都只執(zhí)行最后一次,在Vue中使用防抖函數(shù)可以避免在頻繁觸發(fā)的事件中重復(fù)執(zhí)行操作,這篇文章主要介紹了vue中使用lodash的debounce防抖函數(shù),需要的朋友可以參考下
2024-01-01
ElementUI修改實(shí)現(xiàn)更好用圖片上傳預(yù)覽組件
這篇文章主要為大家介紹了ElementUI修改實(shí)現(xiàn)更好用圖片上傳預(yù)覽組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
vue實(shí)現(xiàn)動(dòng)態(tài)表單動(dòng)態(tài)渲染組件的方式(2)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)動(dòng)態(tài)表單動(dòng)態(tài)渲染組件的方式第二篇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
vue圖片上傳本地預(yù)覽組件使用詳解
這篇文章主要為大家詳細(xì)介紹了vue圖片上傳本地預(yù)覽組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-02-02