基于vue中keep-alive緩存問題的解決方法
更新時間：2018年09月21日 10:17:56 作者：donggua_123
今天小編就為大家分享一篇基于vue中keep-alive緩存問題的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
vue開發(fā)的時候，我們經(jīng)常會有這樣的需求：開發(fā)一個詳細(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)入詳情頁面時，可以在created中拿到id，但是返回后，再點擊進(jìn)入，就不會再走相應(yīng)的生命周期了，無法拿到新的id
這時候可以使用vue的$destroy()方法
這是vue的一個生命周期，完全銷毀一個實例。清理它與其它實例的連接，解綁它的全部指令及事件監(jiān)聽器。
不用$destroy方法的時候可以用watch監(jiān)聽路有變化來實現(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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
vue cli 3.0下配置開發(fā)環(huán)境下的sourcemap問題
這篇文章主要介紹了vue cli 3.0下配置開發(fā)環(huán)境下的sourcemap問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
vue在?for?循環(huán)里使用異步調(diào)用?async/await的方法
大家都遇到這樣的問題,在使用函數(shù)的async/await異步調(diào)用時候,放在正常函數(shù)中單個調(diào)用時沒有問題的,但是await放在forEach()循環(huán)里面就會報錯,本文給大家介紹vue?如何在?for?循環(huán)里面使用異步調(diào)用?async/await,感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了vue中循環(huán)請求接口參數(shù)問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vuejs 組件——props數(shù)據(jù)傳遞的實例代碼
本篇文章主要介紹了Vuejs 組件——props數(shù)據(jù)傳遞的實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
本文主要介紹了mini-vue渲染的簡易實現(xiàn)，主要簡單來實現(xiàn)一個虛擬dom渲染真實dom，以及更新的方法。具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
最近新做了個項目，前端使用的是目前很流行的前端框架，對于后端，本項目選擇的是比較好上手、輕量級的python后臺框架：Flask。感興趣的可以了解一下2021-05-05
Vue中computed(計算屬性)和watch(監(jiān)聽屬性)的用法及區(qū)別說明
這篇文章主要介紹了Vue中computed(計算屬性)和watch(監(jiān)聽屬性)的用法及區(qū)別說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了vue高級組件之provide與inject使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)帶放大鏡的搜索框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
vue中window.addEventListener(‘scroll‘,?xx)失效的解決
這篇文章主要介紹了vue中window.addEventListener(‘scroll‘,?xx)失效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07