深入淺出this.$router.go(0)

一、理解this.$router.go(0)

this.$router.go(0)是Vue.js中使用Vue Router的命令，它可以強制刷新當前頁面。

如果頁面中有無法立即更新的內容，或者想要重置組件的狀態，此時就可以使用this.$router.go(0)來達到目的。

二、使用this.$router.go(0)的場景

1、重置組件狀態：當一個Vue組件涉及到某個狀態的改變，但是在頁面刷新或者之後的路由切換後，該狀態沒有重置，此時可以使用this.$router.go(0)來強制更新頁面，重置組件的狀態。

<template>
  <div>
    <input v-model="content">
    <button @click="submit">提交</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      content: ''
    }
  },
  methods: {
    submit () {
      // 調用 api 將內容提交到伺服器
      // 保存成功後，清空 input 顯示區域的內容
      api.save(this.content).then(() => {
        this.content = ''
      })
    }
  }
}
</script>

在上面的例子中，當保存成功後，雖然輸入框中的內容被清空，但是頁面上顯示的內容並沒有重置，此時可以使用this.$router.go(0)來達到刷新頁面的目的。

2、組件刷新：Vue.js的組件中有一些特殊生命周期函數，比如activated()，它只有在組件被綁定到路由時才會調用。如果在使用了activated()之後，想要重置組件狀態，那麼可以使用this.$router.go(0)來強制刷新頁面，從而使組件生命周期從頭開始。

<template>
  <div>
    <div v-if="userInfo">
      <p>用戶名：{{userInfo.name}}</p>
      <p>性別：{{userInfo.gender}}</p>
      <p>年齡：{{userInfo.age}}</p>
    </div>
    <div v-else>
      <button @click="login">登錄</button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      userInfo: null
    }
  },
  methods: {
    login () {
      // 調用登錄介面，獲取用戶信息
      api.login().then((userInfo) => {
        this.userInfo = userInfo
      })
    }
  },
  activated () {
    // 頁面切換回來時，重置組件狀態
    this.userInfo = null
  }
}
</script>

在上面的例子中，當組件切換到其他頁面之後再返回，由於activated()生命周期函數在頁面切換回來時不會再次調用，所以需要使用this.$router.go(0)來刷新頁面，重置組件狀態。

三、this.$router.go(0)的注意事項

1、this.$router.go(0)只能作用於當前路由，它只能強制當前頁面重新載入，無法影響其他頁面。

2、使用this.$router.go(0)會重新刷新整個頁面，會影響頁面的性能；如果只是需要更新某一個部分，可以考慮使用Vue.js的局部更新機制。

3、使用this.$router.go(0)之後，會跳轉到當前路由的初始頁面，並重新載入整個頁面，這意味著可能會丟失一些用戶輸入的數據，需要在頁面刷新之前進行數據保存。

四、實例代碼

下面是一個簡單的使用Vue.js和Vue Router實現的應用，展示了如何使用this.$router.go(0)來重置組件狀態。

<template>
  <div>
    <input v-model="content">
    <button @click="submit">提交</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      content: ''
    }
  },
  methods: {
    submit () {
      // 調用 api 將內容提交到伺服器
      // 保存成功後，清空 input 顯示區域的內容
      api.save(this.content).then(() => {
        this.content = ''
        this.$router.go(0) // 強制刷新頁面，重置組件狀態
      })
    }
  }
}
</script>