vue3 三种刷新页面方式

在 Vue 3 中，有几种方法可以刷新页面。最常见的方法是使用 JavaScript 的 window.location.reload 方法来刷新整个页面。你也可以使用 Vue Router 提供的功能来重新加载当前的路由组件。以下是几种不同的刷新页面的方法及其示例代码。

方法一：使用 window.location.reload

这是最简单和直接的方法，使用 JavaScript 的 window.location.reload 方法来刷新整个页面。

示例

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="refreshPage">刷新页面</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 重新加载当前路由

如果你使用 Vue Router，可以使用 this.$router.push 方法重新导航到当前路由，从而重新加载当前组件。

示例

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="refreshRoute">刷新当前路由</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 重新加载当前组件

你也可以通过手动触发组件的卸载和挂载来重新加载当前组件。

示例

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="refreshComponent">刷新当前组件</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}>刷新当前组件</button>
      </div>
    );
  }
};
</script>

<style scoped>
/* 这里可以添加你的样式 */
</style>

解释

• window.location.reload 方法：

  • 这是最直接的方法，刷新整个页面。页面会完全重新加载，包括重新加载所有资源（HTML、CSS、JavaScript 等）。
  • 使用 window.location.reload() 方法来实现。

• 使用 Vue Router 重新加载当前路由：

  • 使用 Vue Router 的 push 方法重新导航到当前路由，从而重新加载当前组件。
  • 通过在路由参数中添加一个时间戳（t: Date.now()），确保路由发生变化，从而触发重新加载。

• 手动触发组件的卸载和挂载：

  • 使用一个 key 来强制重新渲染组件。
  • 每次点击按钮时，增加 key 的值，Vue 会认为这是一个新的组件实例，从而重新挂载组件。

总结

• 刷新整个页面：使用 window.location.reload 方法，这是最简单和直接的方式。
• 重新加载当前路由：使用 Vue Router 的 push 方法，可以重新导航到当前路由，从而重新加载当前组件。
• 手动触发组件的卸载和挂载：通过修改组件的 key，强制重新渲染组件。

选择哪种方法取决于你的具体需求。如果你只需要刷新当前组件，使用 Vue Router 或手动触发组件的卸载和挂载会更加高效和灵活。