vue開發的時候,我們經常會有這樣的需求:開發一個詳細頁面來展示商品的詳細信息,根據列表頁傳入的id進行請求,拿到對應的數據進行渲染。
但是一般在路由上都會加上keep-alive保持數據的狀態,除非強制無緩存刷新,這就導致第一次進入詳情頁面時,可以在created中拿到id,但是返回后,再點擊進入,就不會再走相應的生命周期了,無法拿到新的id
這時候可以使用vue的$destroy()方法
這是vue的一個生命周期,完全銷毀一個實例。清理它與其它實例的連接,解綁它的全部指令及事件監聽器。
不用$destroy方法的時候可以用watch監聽路有變化來實現效果
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緩存問題的解決方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持錯新站長站。
新聞熱點
疑難解答
圖片精選