Vue 刷新当前组件的5种方式

一，使用 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>