Vue中使用this.$router.push切換路由時頁面不刷新的解決方法

一、原因分析

在我們平時使用Vue開發項目時，經常會使用this.$router.push切換路由，從而實現頁面之間的跳轉。但是，有時候我們發現切換路由後，頁面並沒有進行刷新，這時候我們需要先明確一下這種現象的原因。

實際上，這種現象主要是由於Vue使用了虛擬DOM這一技術所導致的。在Vue中，每當數據發生改變時，Vue會通過比較新舊虛擬DOM樹的差異來更新頁面，從而實現頁面的動態渲染。而使用this.$router.push切換路由後，並沒有觸發數據的改變，因此也就沒有引起頁面的重新渲染。

即使我們使用watch來監聽路由的改變，由於Vue的非同步更新機制，也仍然不能保證watch回調函數中的代碼能夠在頁面更新之前執行完畢。

二、解決方案

1、使用this.$router.go(0)方法刷新頁面

在使用this.$router.push切換路由後，我們可以通過調用this.$router.go(0)方法來強制刷新頁面。這個方法會讓路由回退到當前頁面，並重新載入一次頁面。

  // 在組件中使用this.$router.push切換路由
  this.$router.push('/my-route')
  
  // 頁面不刷新，調用this.$router.go(0)方法
  this.$router.go(0)

但是，使用這種方法會有以下幾個缺點：

• 如用戶當前的滾動位置、表單數據等都會丟失，從用戶體驗上講並不友好。
• 由於頁面被重新載入，也就導致了從伺服器重新獲取數據，因此會增加伺服器的壓力。

2、使用Vue的key特性

Vue提供了一個特性叫key，可以用來指定組件在更新時的唯一標識符。當組件的key發生改變時，Vue會銷毀該組件並重新創建一個新的組件實例，從而重新渲染頁面。

因此，我們可以在路由切換時，通過給標籤設置一個key，來實現頁面的重新渲染。

  <template>
    <div>
      <ul>
        <router-link to="/route1">Route1</router-link>
        <router-link to="/route2">Route2</router-link>
      </ul>
      <router-view :key="$route.fullPath" />
    </div>
  </template>

在上述代碼中，我們通過給標籤加上:key=”$route.fullPath”，來讓Vue在更新頁面時使用完整的路由路徑作為key值。這樣，在調用this.$router.push切換路由時，Vue就會重新渲染頁面了。

需要注意的是，使用:key特性並不是解決頁面不刷新的唯一方法，但是在大多數情況下，它是最為便捷和高效的方法。

3、使用watch監控$route對象

在Vue的實例中，我們可以使用watch來監聽變數的改變。同樣，在Vue的路由對象$route中，也有一個query變數，可以用來表示當前路由的請求參數。因此，我們可以通過watch來監控$route對象的變化，從而在路由切換時自動刷新頁面。

  <template>
    <div>
      <ul>
        <router-link to="/route1">Route1</router-link>
        <router-link to="/route2">Route2</router-link>
      </ul>
      <router-view />
    </div>
  </template>

  <script>
  export default {
    watch: {
      '$route': function () {
        location.reload()
      }
    }
  }
  </script>

在上述代碼中，我們通過使用watch來監聽$route變數的改變，當$route發生變化時，我們就調用location.reload()方法來刷新頁面。這種方法的優點是極為簡單，但是需要注意：由於它每次刷新頁面都會從伺服器重新獲取數據，因此需要注意性能問題。

三、小結

總的來說，使用this.$router.push切換路由時頁面不刷新的問題，其根本原因在於Vue使用了虛擬DOM技術。因此，在解決這個問題時，我們需要從底層原理上入手，並結合Vue提供的key特性、watch等方法，來實現頁面的重新渲染。

需要注意的是，在使用方法二和方法三時，我們應該根據具體情況來選擇何時去刷新頁面，以避免頁面重新載入造成的性能問題。同時，在實際項目中，我們也可以結合使用這兩種方法，以達到更好的頁面刷新效果。