亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時間：2018年09月21日 11:00:44   作者：小皮咖  
今天小編就為大家分享一篇vue 使某個組件不被 keep-alive 緩存的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

提出問題

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

分析問題

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

解決問題

（1）. 查看官方文檔

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

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

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

<!-- 逗號分隔字符串 -->
<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 選項，如果 name 選項不可用，則匹配它的局部注冊名稱 (父組件 components 選項的鍵值)。匿名組件不能被匹配。

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

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

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

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

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

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

相關(guān)文章

  • Vue動畫事件詳解及過渡動畫實例

    Vue動畫事件詳解及過渡動畫實例

    通過 Vue.js 的過渡系統(tǒng)，可以在元素從 DOM 中插入或移除時自動應(yīng)用過渡效果。Vue.js 會在適當(dāng)?shù)臅r機(jī)為你觸發(fā) CSS 過渡或動畫，你也可以提供相應(yīng)的 JavaScript 鉤子函數(shù)在過渡過程中執(zhí)行自定義的 DOM 操作
    2019-02-02
  • vue3 定義使用全局變量的示例詳解

    vue3 定義使用全局變量的示例詳解

    全局變量（函數(shù)等）可以在任意組件內(nèi)訪問,可以當(dāng)組件間的傳值使用,這篇文章給大家介紹vue3 定義使用全局變量的示例詳解,感興趣的朋友跟隨小編一起看看吧
    2023-10-10
  • vue.js 中使用（...）運(yùn)算符報錯的解決方法

    vue.js 中使用（...）運(yùn)算符報錯的解決方法

    這篇文章主要介紹了vue.js 中使用（...）運(yùn)算符報錯的解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • vue實現(xiàn)抖音時間轉(zhuǎn)盤

    vue實現(xiàn)抖音時間轉(zhuǎn)盤

    這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)抖音時間轉(zhuǎn)盤，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2019-09-09
  • Vue自定義復(fù)制指令 v-copy功能的實現(xiàn)

    Vue自定義復(fù)制指令 v-copy功能的實現(xiàn)

    這篇文章主要介紹了Vue自定義復(fù)制指令 v-copy,使用自定義指令創(chuàng)建一個點(diǎn)擊復(fù)制文本功能，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2022-01-01
  • 淺談vue引入css,less遇到的坑和解決方法

    淺談vue引入css,less遇到的坑和解決方法

    下面小編就為大家分享一篇淺談vue引入css,less遇到的坑和解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-01-01
  • vue中如何使用lodash的debounce防抖函數(shù)

    vue中如何使用lodash的debounce防抖函數(shù)

    防抖函數(shù) debounce 指的是某個函數(shù)在某段時間內(nèi),無論觸發(fā)了多少次回調(diào),都只執(zhí)行最后一次,在Vue中使用防抖函數(shù)可以避免在頻繁觸發(fā)的事件中重復(fù)執(zhí)行操作,這篇文章主要介紹了vue中使用lodash的debounce防抖函數(shù),需要的朋友可以參考下
    2024-01-01
  • ElementUI修改實現(xiàn)更好用圖片上傳預(yù)覽組件

    ElementUI修改實現(xiàn)更好用圖片上傳預(yù)覽組件

    這篇文章主要為大家介紹了ElementUI修改實現(xiàn)更好用圖片上傳預(yù)覽組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-09-09
  • vue實現(xiàn)動態(tài)表單動態(tài)渲染組件的方式(2)

    vue實現(xiàn)動態(tài)表單動態(tài)渲染組件的方式(2)

    這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)動態(tài)表單動態(tài)渲染組件的方式第二篇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-04-04
  • vue圖片上傳本地預(yù)覽組件使用詳解

    vue圖片上傳本地預(yù)覽組件使用詳解

    這篇文章主要為大家詳細(xì)介紹了vue圖片上傳本地預(yù)覽組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2019-02-02

最新評論