深入浅出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>