在 Vue 3 中，有幾種方法可以刷新頁(yè)面。最常見(jiàn)的方法是使用 JavaScript 的 window.location.reload 方法來(lái)刷新整個(gè)頁(yè)面。你也可以使用 Vue Router 提供的功能來(lái)重新加載當(dāng)前的路由組件。以下是幾種不同的刷新頁(yè)面的方法及其示例代碼。

方法一：使用 window.location.reload

這是最簡(jiǎn)單和直接的方法，使用 JavaScript 的 window.location.reload 方法來(lái)刷新整個(gè)頁(yè)面。

示例

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="refreshPage">刷新頁(yè)面</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue!');

    const refreshPage = () => {
      window.location.reload();
    };

    return {
      message,
      refreshPage
    };
  }
};
</script>

<style scoped>
/* 這里可以添加你的樣式 */
</style>

方法二：使用 Vue Router 重新加載當(dāng)前路由

如果你使用 Vue Router，可以使用 this.$router.push 方法重新導(dǎo)航到當(dāng)前路由，從而重新加載當(dāng)前組件。

示例

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="refreshRoute">刷新當(dāng)前路由</button>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';

export default {
  setup() {
    const message = ref('Hello, Vue!');
    const router = useRouter();
    const route = useRoute();

    const refreshRoute = () => {
      router.push({ path: route.path, query: { ...route.query, t: Date.now() } });
    };

    return {
      message,
      refreshRoute
    };
  }
};
</script>

<style scoped>
/* 這里可以添加你的樣式 */
</style>

方法三：使用 Vue Router 重新加載當(dāng)前組件

你也可以通過(guò)手動(dòng)觸發(fā)組件的卸載和掛載來(lái)重新加載當(dāng)前組件。

示例

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="refreshComponent">刷新當(dāng)前組件</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue!');
    const key = ref(0);

    const refreshComponent = () => {
      key.value += 1;
    };

    return {
      message,
      key,
      refreshComponent
    };
  },
  render() {
    return (
      <div key={this.key}>
        <p>{this.message}</p>
        <button onClick={this.refreshComponent}>刷新當(dāng)前組件</button>
      </div>
    );
  }
};
</script>

<style scoped>
/* 這里可以添加你的樣式 */
</style>

解釋

• window.location.reload 方法：

  • 這是最直接的方法，刷新整個(gè)頁(yè)面。頁(yè)面會(huì)完全重新加載，包括重新加載所有資源（HTML、CSS、JavaScript 等）。
  • 使用 window.location.reload() 方法來(lái)實(shí)現(xiàn)。

• 使用 Vue Router 重新加載當(dāng)前路由：

  • 使用 Vue Router 的 push 方法重新導(dǎo)航到當(dāng)前路由，從而重新加載當(dāng)前組件。
  • 通過(guò)在路由參數(shù)中添加一個(gè)時(shí)間戳（t: Date.now()），確保路由發(fā)生變化，從而觸發(fā)重新加載。

• 手動(dòng)觸發(fā)組件的卸載和掛載：

  • 使用一個(gè) key 來(lái)強(qiáng)制重新渲染組件。
  • 每次點(diǎn)擊按鈕時(shí)，增加 key 的值，Vue 會(huì)認(rèn)為這是一個(gè)新的組件實(shí)例，從而重新掛載組件。

總結(jié)

• 刷新整個(gè)頁(yè)面：使用 window.location.reload 方法，這是最簡(jiǎn)單和直接的方式。
• 重新加載當(dāng)前路由：使用 Vue Router 的 push 方法，可以重新導(dǎo)航到當(dāng)前路由，從而重新加載當(dāng)前組件。
• 手動(dòng)觸發(fā)組件的卸載和掛載：通過(guò)修改組件的 key，強(qiáng)制重新渲染組件。

選擇哪種方法取決于你的具體需求。如果你只需要刷新當(dāng)前組件，使用 Vue Router 或手動(dòng)觸發(fā)組件的卸載和掛載會(huì)更加高效和靈活。