快捷導(dǎo)航

基于vue中keep-alive緩存問(wèn)題的解決方法

更新時(shí)間：2018年09月21日 10:17:56 作者：donggua_123

今天小編就為大家分享一篇基于vue中keep-alive緩存問(wèn)題的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

vue開(kāi)發(fā)的時(shí)候，我們經(jīng)常會(huì)有這樣的需求：開(kāi)發(fā)一個(gè)詳細(xì)頁(yè)面來(lái)展示商品的詳細(xì)信息，根據(jù)列表頁(yè)傳入的id進(jìn)行請(qǐng)求，拿到對(duì)應(yīng)的數(shù)據(jù)進(jìn)行渲染。

但是一般在路由上都會(huì)加上keep-alive保持?jǐn)?shù)據(jù)的狀態(tài)，除非強(qiáng)制無(wú)緩存刷新，這就導(dǎo)致第一次進(jìn)入詳情頁(yè)面時(shí)，可以在created中拿到id，但是返回后，再點(diǎn)擊進(jìn)入，就不會(huì)再走相應(yīng)的生命周期了，無(wú)法拿到新的id

這時(shí)候可以使用vue的$destroy()方法

這是vue的一個(gè)生命周期，完全銷毀一個(gè)實(shí)例。清理它與其它實(shí)例的連接，解綁它的全部指令及事件監(jiān)聽(tīng)器。

不用$destroy方法的時(shí)候可以用watch監(jiān)聽(tīng)路有變化來(lái)實(shí)現(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緩存問(wèn)題的解決方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue3的vite中圖片動(dòng)態(tài)加載3種方式
這篇文章主要給大家介紹了關(guān)于Vue3的vite中圖片動(dòng)態(tài)加載3種方式的相關(guān)資料,圖片進(jìn)入可視區(qū)域,進(jìn)行動(dòng)態(tài)加載圖片操作,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-11-11
Vue3新屬性之css中使用v-bind的方法（v-bind?in?css）
這篇文章主要介紹了Vue3新屬性css中使用v-bind（v-bind?in?css）的方法，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-01-01
vuejs前后端數(shù)據(jù)交互之從后端請(qǐng)求數(shù)據(jù)的實(shí)例
今天小編就為大家分享一篇vuejs前后端數(shù)據(jù)交互之從后端請(qǐng)求數(shù)據(jù)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
Vue3和Vite不得不說(shuō)的那些事
這篇文章主要為大家詳細(xì)介紹了Vue3和Vite的那些事，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-02-02
vue實(shí)現(xiàn)防抖的實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)防抖的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01
vue中使用svg-icon遇到的坑及解決
這篇文章主要介紹了vue中使用svg-icon遇到的坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
關(guān)于vue文件中index.vue的使用方法
這篇文章主要介紹了關(guān)于vue文件中index.vue的使用方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
Vue.js 事件修飾符的使用教程
在實(shí)際開(kāi)發(fā)中，不可避免的會(huì)使用到對(duì)于事件的操作，如何處理 DOM 事件流，成為我們必須要掌握的技能。這篇文章主要介紹了Vue.js 事件修飾符的使用教程,需要的朋友可以參考下
2018-11-11
vue store之狀態(tài)管理模式的詳細(xì)介紹
這篇文章主要介紹了vue store之狀態(tài)管理模式的詳細(xì)介紹，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06
Vue 父子組件實(shí)現(xiàn)數(shù)據(jù)雙向綁定效果的兩種方式(案例代碼)
本文給大家分享Vue 父子組件實(shí)現(xiàn)數(shù)據(jù)雙向綁定效果的兩種方式，方式一是通過(guò)監(jiān)聽(tīng)事件實(shí)現(xiàn)方式二是通過(guò) v-model 實(shí)現(xiàn)，每種方式結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2022-11-11