一、理解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>原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/309266.html
微信扫一扫 
支付宝扫一扫 