vue中共用一個頁面只是路由引數的變化的單頁面重新渲染

遇到問題的需求是：一個列表有好多層，但是列表都長得一樣只是對應的不同的層級，所以共用了一個單頁面，只是路由上的params的ID在進行變化

問題是：路由變化了，但是頁面並沒有重新渲染。

剛開始想到的解決方法是在標籤上加 :key="Math.random()",但是沒有什麼效果，跟同事商量了半天也解不了惑，這個屬性只在elementUI的table表格上使用過。

第二種，記得vue-router中<router-view></router-view>這個標籤上可以新增key屬性，即

<router-view :key="$route.fullPath"></router-view>

$route.fullPath完成解析後的 URL，包含查詢引數和 hash 的完整路徑

只要url進行變化就會重新渲染，但是基於這個頁面是後來新增加的，新增全域性的這個屬性會有所影響，所以拋棄了這一種方法

第三種，在vue-router的官網上看到了資料獲取---導航完成後獲取資料，通過watch進行監聽$route

具體程式碼實現：

watch: {
    // 如果路由有變化，會再次執行該方法
    '$route': 'fetchData'
  },  methods: {
    //fetchData 可以接受兩個引數newVal, oldVal
    fetchData (newVal, oldVal) {      //進行獲取資料的操作
    }
  }
複製程式碼

router.vuejs.org/zh/guide/ad…

第一次寫文章，記錄自己日常的bug，望大家多多包涵，多多提提意見