溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關(guān)如何解決vue中keep-alive緩存問題，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
vue開發(fā)的時候，我們經(jīng)常會有這樣的需求：開發(fā)一個詳細頁面來展示商品的詳細信息，根據(jù)列表頁傳入的id進行請求，拿到對應(yīng)的數(shù)據(jù)進行渲染。
但是一般在路由上都會加上keep-alive保持數(shù)據(jù)的狀態(tài)，除非強制無緩存刷新，這就導(dǎo)致第一次進入詳情頁面時，可以在created中拿到id，但是返回后，再點擊進入，就不會再走相應(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();
}關(guān)于“如何解決vue中keep-alive緩存問題”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼