一，使用 location.reload()
这是最直接的方法，它会像用户点击浏览器的刷新按钮一样重载页面。
location.reload();
二，使用路由刷新当前页面
如果当前组件是通过路由加载的，可以通过路由的 push 方法重新加载当前路由。
this.$router.go(0); // 刷新整个页面（不推荐）
// 或者
this.$router.push({ path: '/current-route' }); // 重新加载当前路由
三，使用 v-if 或者 key 属性
通过改变一个 v-if 条件或者更新一个 key 值来强制 Vue 重新挂载组件，从而达到刷新的效果。
（HTML）
<div v-if="shouldRender"><!-- 页面内容 -->
</div>
(js)
// 使用 v-if
data() {return {shouldRender: true};
},
methods: {refreshPage() {this.shouldRender = false;setTimeout(() => {this.shouldRender = true;}, 0);}
}
(html)
<div :key="uniqueKey"><!-- 页面内容 -->
</div>
(js)
// 使用 key
data() {return {uniqueKey: Date.now()};
},
methods: {refreshPage() {this.uniqueKey = Date.now();}
}
四，使用 beforeRouteUpdate 导航守卫
如果你想在路由不变的情况下刷新数据，可以使用 beforeRouteUpdate 守卫。
beforeRouteUpdate(to, from, next) {// 从这里可以重新获取数据this.fetchData().then(next);
},
methods: {fetchData() {// 数据获取逻辑}
}
五，使用 $forceUpdate 强制更新
$forceUpdate 是 Vue 提供的一个方法，可以强制重新渲染组件。但这种方法不会重置组件的状态，只是触发重新渲染。
<template><div><MyComponent /><button @click="forceUpdate">强制更新</button></div>
</template><script>
export default {methods: {forceUpdate() {this.$forceUpdate(); // 强制重新渲染},},
};
</script>
