基于vue中keep-alive緩存問題的解決方法
vue開發(fā)的時(shí)候，我們經(jīng)常會有這樣的需求：開發(fā)一個(gè)詳細(xì)頁面來展示商品的詳細(xì)信息，根據(jù)列表頁傳入的id進(jìn)行請求，拿到對應(yīng)的數(shù)據(jù)進(jìn)行渲染。
但是一般在路由上都會加上keep-alive保持?jǐn)?shù)據(jù)的狀態(tài)，除非強(qiáng)制無緩存刷新，這就導(dǎo)致第一次進(jìn)入詳情頁面時(shí)，可以在created中拿到id，但是返回后，再點(diǎn)擊進(jìn)入，就不會再走相應(yīng)的生命周期了，無法拿到新的id
這時(shí)候可以使用vue的$destroy()方法
這是vue的一個(gè)生命周期，完全銷毀一個(gè)實(shí)例。清理它與其它實(shí)例的連接，解綁它的全部指令及事件監(jiān)聽器。
不用$destroy方法的時(shí)候可以用watch監(jiān)聽路有變化來實(shí)現(xiàn)效果
created() {
this.goodsId = this.$route.query.goodsId;
this.getGoodsInfo();
},
watch: {
'$route'(to, from) {
if(to.name === 'GoodsDetail') {
this.goodsId = to.query.goodsId;
this.getGoodsInfo();
}
}
}
用$destroy方法
created() {
if(this.goodsId !== this.$route.query.goodsId) {
this.$destroy();
}
this.goodsId = this.$route.query.goodsId;
this.getGoodsInfo();
}
以上這篇基于vue中keep-alive緩存問題的解決方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- vue里如何主動銷毀keep-alive緩存的組件
- vue緩存的keepalive頁面刷新數(shù)據(jù)的方法
- vue 使某個(gè)組件不被 keep-alive 緩存的方法
- vue使用keep-alive實(shí)現(xiàn)數(shù)據(jù)緩存不刷新
- vue中keep-alive，include的緩存問題
- keep-alive不能緩存多層級路由菜單問題解決
- vue項(xiàng)目優(yōu)化之通過keep-alive數(shù)據(jù)緩存的方法
- 詳解keep-alive + vuex 讓緩存的頁面靈活起來
- vue2使用keep-alive緩存多層列表頁的方法
- 圖文詳解keep-alive如何清除緩存
相關(guān)文章
vue cli 3.0下配置開發(fā)環(huán)境下的sourcemap問題
這篇文章主要介紹了vue cli 3.0下配置開發(fā)環(huán)境下的sourcemap問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
vue在?for?循環(huán)里使用異步調(diào)用?async/await的方法
大家都遇到這樣的問題,在使用函數(shù)的async/await異步調(diào)用時(shí)候,放在正常函數(shù)中單個(gè)調(diào)用時(shí)沒有問題的,但是await放在forEach()循環(huán)里面就會報(bào)錯,本文給大家介紹vue?如何在?for?循環(huán)里面使用異步調(diào)用?async/await,感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了vue中循環(huán)請求接口參數(shù)問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vuejs 組件——props數(shù)據(jù)傳遞的實(shí)例代碼
本篇文章主要介紹了Vuejs 組件——props數(shù)據(jù)傳遞的實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
本文主要介紹了mini-vue渲染的簡易實(shí)現(xiàn)，主要簡單來實(shí)現(xiàn)一個(gè)虛擬dom渲染真實(shí)dom，以及更新的方法。具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
最近新做了個(gè)項(xiàng)目，前端使用的是目前很流行的前端框架，對于后端，本項(xiàng)目選擇的是比較好上手、輕量級的python后臺框架：Flask。感興趣的可以了解一下2021-05-05
Vue中computed(計(jì)算屬性)和watch(監(jiān)聽屬性)的用法及區(qū)別說明
這篇文章主要介紹了Vue中computed(計(jì)算屬性)和watch(監(jiān)聽屬性)的用法及區(qū)別說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了vue高級組件之provide與inject使用及說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)帶放大鏡的搜索框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
vue中window.addEventListener(‘scroll‘,?xx)失效的解決
這篇文章主要介紹了vue中window.addEventListener(‘scroll‘,?xx)失效的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07