vue vue-router 同一個頁面地址欄參數改變，頁面不刷新的問題以及解決方案

在開發中，難免會遇上各種問題，今天講解一下，在vue項目中，只改變路由中的參數，路由地址不改變頁面數據不刷新問題；
造成這個問題的原因，是因為 vue-router 同一個頁面地址欄參數改變（比如文章的發布和編輯是同一個頁面），不會觸發vue的created或者mounted鈎子，所以數據不會重新渲染。

解決方法：

1：監聽地址欄變化（watch）,這是vue-router官方給出的解決辦法。

監聽路由變化，把初始化的方法重新寫到監聽的方法里面執行

watch: {
    $route(to, from) {
        if (this.$route.query.參數) {
             重新加載一次created或者mounted鈎子中的渲染的數據
        }
      },
    // 或者
    $route(){
         if (this.$route.query.參數) {
             重新加載一次created或者mounted鈎子中的渲染的數據
         }
       }, 
    },

2：給router-view加個唯一的key，來保證路由切換時都會重新渲染觸發鈎子了（這個方法是我在收集資料的時候看別人文章發現的）

 

 

個人更傾向於第二種簡單省事，第一種要是有多個頁面共用，就要多次寫監聽