基于vue中keep-alive緩存問題的解決方法
vue開發(fā)的時候,我們經常會有這樣的需求:開發(fā)一個詳細頁面來展示商品的詳細信息,根據(jù)列表頁傳入的id進行請求,拿到對應的數(shù)據(jù)進行渲染。
但是一般在路由上都會加上keep-alive保持數(shù)據(jù)的狀態(tài),除非強制無緩存刷新,這就導致第一次進入詳情頁面時,可以在created中拿到id,但是返回后,再點擊進入,就不會再走相應的生命周期了,無法拿到新的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緩存問題的解決方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Vue3新屬性之css中使用v-bind的方法(v-bind?in?css)
這篇文章主要介紹了Vue3新屬性css中使用v-bind(v-bind?in?css)的方法,本文結合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-01-01vuejs前后端數(shù)據(jù)交互之從后端請求數(shù)據(jù)的實例
今天小編就為大家分享一篇vuejs前后端數(shù)據(jù)交互之從后端請求數(shù)據(jù)的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08Vue 父子組件實現(xiàn)數(shù)據(jù)雙向綁定效果的兩種方式(案例代碼)
本文給大家分享Vue 父子組件實現(xiàn)數(shù)據(jù)雙向綁定效果的兩種方式,方式一是通過監(jiān)聽事件實現(xiàn)方式二是通過 v-model 實現(xiàn),每種方式結合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2022-11-11