Vue Router如何刷新当前页面
Vue项目, 在实际工作中, 有些时候需要在 加载完某些数据之后对当前页面进行刷新, 以期 onMounted 等生命周期函数, 或者 数据重新加载. 总之是期望页面可以重新加载一次.
目前总结有三种途径可实现以上需求:
一、reload 直接刷新页面
window.location.reload(); $router.go(0);
相当于按了 F5, 因此缺点也很明显, 体验感不佳, 因为要加载所有页面资源相对较慢, 比较耗时.
二、Vue Router 刷新当前页面
这个时候, 我们通过 $router.push 一个 refresh 路由的形式实现, 具体步骤如下:
步骤一:
新建一个 vue 文件, 文件中代码如下 ( 仅需要如下代码即可 ) :
<template>
<div></div>
</template>
<script >
export default {
beforeRouteEnter(to, from, next) {
next(vm => {
vm.$router.replace(from.fullPath);
});
},
setup() {}
}
</script>
步骤二:
在你的路由文件中, 配置上述文件路由, 示例代码:
routes 数组中直接添加就行
{
path: '/refresh',
name: 'refresh',
component: () => import('步骤一中创建文件的路径')
},
步骤三:
在目标位置, 使用 $router.push 上述路由即可, 示例代码:
$router.push({
name: 'refresh',
});
以上三步, 结束!
三、依赖注入方式实现 (即, provide/inject )
中心思想: 通过 v-if 来切换 router-view 的 显示/隐藏 从而实现重新加载组件的目的. 步骤如下.
步骤一:
修改 路由出口文件 ( 我测试时是在 App.vue 文件中加的 <router-view /> ), 通过 provide 提供一个刷新方法给后代组件.
注意: 我的Demo中没有测试路由嵌套的场景, 如果你是路由嵌套, 只想刷新嵌套的子路由, 那在这一步修改的就应该是 子路由 出口文件.
核心代码如下:
<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() 方法. 示例代码:
<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 请自行转换.
到此这篇关于Vue Router如何刷新当前页面的文章就介绍到这了,更多相关Vue Router刷新页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
关于Element-UI Table 表格指定列添加点击事件
这篇文章主要介绍了关于Element-UI Table 表格指定列添加点击事件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
本文详细解析了Vue3中多种数据传递与通信方式,包括props/emits、v-model、provide/inject、ref、Pinia/Vex、组合式函数等,并对比了它们各自的优缺点及适用场景,帮助开发者根据实际需求选择最合适的方案,需要的朋友可以参考下2026-05-05
本文主要介绍了Vue.js中el-table表格自定义列控制与拖拽，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要介绍了vue 2.0组件与v-model的相关资料，文中介绍的非常详细，本文适合初学组件编写的同学阅读，需要的朋友可以参考借鉴，下面来一起看看吧。2017-03-03
这篇文章主要介绍了Vue中全局常用的过滤方法解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了在Vue3中实现飘逸的元素拖拽,在本次案例中需要认真思考对应的几个坐标和移动时坐标如何更新，事件的使用要成对出现，如何在这个拖拽的 Icon 上增加点击事件时还需要多做一些处理，需要的朋友可以参考下2023-07-07
路由拦截是一种在用户访问特定页面之前对其进行拦截和处理的机制,下面这篇文章主要给大家介绍了关于vue前端img访问鉴权后端进行拦截的相关资料,需要的朋友可以参考下2024-03-03
这篇文章主要为大家详细介绍了Vue3实现简易音乐播放器组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
Vue Router同名路由导致路由跳转404的解决方法和避坑指南
在 Vue 项目开发中,路由相关的问题十分常见,其中同名路由引发的404跳转问题极具迷惑性,很容易被误判为权限问题,本文将详细记录该问题的排查过程、根源剖析,并结合 Vue Router 官方文档给出解决方案和预防措施,帮助大家避坑2026-03-03
这篇文章主要介绍了Vue2.5学习笔记之如何在项目中使用和配置Vue的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-09-09
最新评论