基于vue中keep-alive緩存問題的解決方法
更新時間：2018年09月21日 10:17:56 作者：donggua_123
今天小編就為大家分享一篇基于vue中keep-alive緩存問題的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
vue開發(fā)的時候，我們經(jīng)常會有這樣的需求：開發(fā)一個詳細(xì)頁面來展示商品的詳細(xì)信息，根據(jù)列表頁傳入的id進行請求，拿到對應(yīng)的數(shù)據(jù)進行渲染。
但是一般在路由上都會加上keep-alive保持?jǐn)?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();
}
以上這篇基于vue中keep-alive緩存問題的解決方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于Vue3的vite中圖片動態(tài)加載3種方式的相關(guān)資料,圖片進入可視區(qū)域,進行動態(tài)加載圖片操作,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
Vue3新屬性之css中使用v-bind的方法（v-bind?in?css）
這篇文章主要介紹了Vue3新屬性css中使用v-bind（v-bind?in?css）的方法，本文結(jié)合實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-01-01
vuejs前后端數(shù)據(jù)交互之從后端請求數(shù)據(jù)的實例
今天小編就為大家分享一篇vuejs前后端數(shù)據(jù)交互之從后端請求數(shù)據(jù)的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細(xì)介紹了Vue3和Vite的那些事，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)防抖的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要介紹了vue中使用svg-icon遇到的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了關(guān)于vue文件中index.vue的使用方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
在實際開發(fā)中，不可避免的會使用到對于事件的操作，如何處理 DOM 事件流，成為我們必須要掌握的技能。這篇文章主要介紹了Vue.js 事件修飾符的使用教程,需要的朋友可以參考下2018-11-11
vue store之狀態(tài)管理模式的詳細(xì)介紹
這篇文章主要介紹了vue store之狀態(tài)管理模式的詳細(xì)介紹，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
Vue 父子組件實現(xiàn)數(shù)據(jù)雙向綁定效果的兩種方式(案例代碼)
本文給大家分享Vue 父子組件實現(xiàn)數(shù)據(jù)雙向綁定效果的兩種方式，方式一是通過監(jiān)聽事件實現(xiàn)方式二是通過 v-model 實現(xiàn)，每種方式結(jié)合實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2022-11-11