Vue Router 刷新当前页面

Vue项目, 在实际工作中, 有些时候需要在加载完某些数据之后对当前页面进行刷新, 以期 onMounted 等生命周期函数, 或者数据重新加载.总之是期望页面可以重新加载一次.

目前总结有三种途径可实现以上需求:

一, reload 直接刷新页面

javascript 复制代码

window.location.reload();
$router.go(0);

相当于按了 F5, 因此缺点也很明显, 体验感不佳, 因为要加载所有页面资源相对较慢, 比较耗时.

二, Vue Router 刷新当前页面

这个时候, 我们通过 $router.push 一个 refresh 路由的形式实现, 具体步骤如下:

步骤一:

新建一个 vue 文件, 文件中代码如下 ( 仅需要如下代码即可 ) :

javascript 复制代码

<template>
  <div></div>
</template>

<script >
export default {
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.$router.replace(from.fullPath);
    });
  },
  setup() {}
}
</script>

步骤二:

在你的路由文件中, 配置上述文件路由, 示例代码:

routes 数组中直接添加就行

javascript 复制代码

{
    path: '/refresh',
    name: 'refresh',
    component: () => import('步骤一中创建文件的路径')
  },

步骤三:

在目标位置, 使用 $router.push 上述路由即可, 示例代码:

javascript 复制代码

$router.push({
    name: 'refresh',
});

以上三步, 结束!

三, 依赖注入方式实现 (即, provide/inject )

中心思想: 通过 v-if 来切换 router-view 的显示/隐藏从而实现重新加载组件的目的. 步骤如下.

步骤一:

修改路由出口文件 ( 我测试时是在 App.vue 文件中加的 <router-view /> ), 通过 provide 提供一个刷新方法给后代组件.

注意: 我的Demo中没有测试路由嵌套的场景, 如果你是路由嵌套, 只想刷新嵌套的子路由, 那在这一步修改的就应该是子路由出口文件.

核心代码如下:

javascript 复制代码

<template>
  <div id="app">
    <!-- <router-view></router-view> -->
    <router-view v-if="isRefreshFlag"></router-view>
  </div>
</template>
<script setup>
import { ref, nextTick, provide } from "vue";

const isRefreshFlag = ref(true)
function reloadPage() {
  isRefreshFlag.value = false
  nextTick(() => {
    isRefreshFlag.value = true
  })
}
provide("reloadPage", reloadPage)

</script>

<style>
</style>

步骤二:

在目标组件的目标位置, 通过 inject 调用步骤一中的 reloadPage() 方法. 示例代码:

javascript 复制代码

<template>
  <div>
    ...
    <button @click="refreshPage">刷新页面</button>
  </div>
</template>
<script setup>
import { inject } from "vue";

const reloadPage = inject("reloadPage");

function refreshPage() {
  reloadPage();
}

</script>

<style>
</style>

以上两步, 结束!

以上三种方式, 亲测有效, 不过是 Vue 3 的代码风格, Vue 2 请自行转换.

欢迎留言扩充新方法!