Vue下URL地址欄參數改變卻不能刷新界面

在完成畢業設計（基於Vue的信息資訊展示與管理平台）的過程中，處理如下圖所示的 點擊左側欄目列表跳轉到對應文章列表 的問題時，初次點擊可以跳轉到對應的頁面，但是當第二次點擊時，雖然地址欄的參數改變了，也沒有重新刷新頁面中的內容。

 

第1次，點擊“潮科技”時顯示的內容：

 

 第2次，點擊“奇趣事”時顯示的內容：

 

造成上述情況的原因：

• vue項目中路由跳轉默認采用hash的方式，而hash的變化不會導致瀏覽器發送請求到服務器；
• 將獲取數據的的函數的執行放在了Vue生命周期函數 mounted() 中，組件初次加載時執行了 mounted() 函數中的內容，但是再次點擊時只有參數變化，組件已經掛載結束而且不會重新加載，mounted()  中的內容當然也就不會重新執行了。

 

解決方案：使用偵聽器監聽URL地址欄參數變化

當偵聽器監聽到URL地址欄參數變化時，調用獲取數據列表的函數 getDate()

watch: {
    '$route' (to, from) {
        this.getData(this.$route.query.id)
    }
}

　　 

methods: {
    async getData (id) {
      // 按照id獲取數據
      const { data: { result } } = await this.$http.get('getShowList', {
        params: { id }
      })
      this.dataList = result
    }
}

　　

通過這種方式，就能使頁面內容隨着參數變化而變化了，如下圖所示：