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

location.reload();

this.$router.go(0); // 刷新整个页面（不推荐）
// 或者
this.$router.push({ path: '/current-route' }); // 重新加载当前路由

（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(to, from, next) {
  // 从这里可以重新获取数据
  this.fetchData().then(next);
},
methods: {
  fetchData() {
    // 数据获取逻辑
  }
}

<template>
  <div>
    <MyComponent />
    <button @click="forceUpdate">强制更新</button>
  </div>
</template>

<script>
export default {
  methods: {
    forceUpdate() {
      this.$forceUpdate(); // 强制重新渲染
    },
  },
};
</script>