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

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

根據vue-router的官方文檔所說，

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

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

.

.

.

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

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

但是都沒有解決這個問題

……

后來經過多次嘗試終于找到問題所在

watch 方法檢測路由變化確實生效了，但是頁面有些關鍵數據沒有清空還是緩存的上一次的數據，所以導致每次加載頁面都不會重新渲染數據，所以找到關鍵數據，在每次路由發生變化的時候重置關鍵數據即可

例如：

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   }  }

這里我的關鍵數據就是 orderId

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。