如何解決vue頁面緩存問題

這篇文章給大家分享的是有關(guān)如何解決vue頁面緩存問題的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

比如有一個(gè)列表頁面，然后列表每項(xiàng)都有一個(gè)詳情，之前用vue1.x的時(shí)候，頁面緩存基本沒有什么問題。

在vue2.0中出現(xiàn)了列表頁面是每次都重新加載數(shù)據(jù)，但是詳情頁面卻只在第一次加載的時(shí)候調(diào)用數(shù)據(jù)，如果返回到列表再進(jìn)入詳情那么頁面是不會(huì)重新渲染頁面，可能是新手吧，這個(gè)問題困擾了我很久，一直沒有辦法解決……

根據(jù)vue-router的官方文檔所說，

watch: {
  // 如果路由有變化，會(huì)再次執(zhí)行該方法
  '$route': 'fetchData'
 }

按照這樣寫了，但是頁面還是沒有渲染

.

.

.

于是就想啊想，想啊想……

以為是路由沒有變，我就在頁面路由后面加何種參數(shù)包括時(shí)間戳

但是都沒有解決這個(gè)問題

……

后來經(jīng)過多次嘗試終于找到問題所在

watch 方法檢測路由變化確實(shí)生效了，但是頁面有些關(guān)鍵數(shù)據(jù)沒有清空還是緩存的上一次的數(shù)據(jù)，所以導(dǎo)致每次加載頁面都不會(huì)重新渲染數(shù)據(jù)，所以找到關(guān)鍵數(shù)據(jù)，在每次路由發(fā)生變化的時(shí)候重置關(guān)鍵數(shù)據(jù)即可

例如：

for(var i =0; i<response.data.length; i++) {
      if(response.data[i].id = this.orderId) {
       this.order = response.data[i]
      }
     }

 watch: {
   '$route': function () {
    this.orders = []
    this.fetchData()
    this.orderId = this.$route.params.orderId
   }
  }

這里我的關(guān)鍵數(shù)據(jù)就是 orderId

感謝各位的閱讀！關(guān)于“如何解決vue頁面緩存問題”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！