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 = falsenextTick(() => {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 请自行转换.

欢迎留言扩充新方法!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/114142.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

My Code Style

受到 _slb 大佬的启发&#xff0c;~~&#xff08;趁着集训休假开摆&#xff09;~~也打算写一篇关于自己码风的文章 QwQ。 自认为自己码风很好 头文件 万能头忠实拥护者&#xff0c;纵使它在变量名上虐我千百遍&#xff0c;我仍然要坚定地使用它&#xff01; 变量 数组一律…

【JavaScript】深入浅出理解事件循环

1. 浏览器的进程模型 1.1 进程 程序运行需要有它自己专属的内存空间&#xff0c;可以把这块内存空间简单的理解为进程。 每个应用至少有一个进程&#xff0c;进程之间相互独立&#xff0c;即使要通信&#xff0c;也需要双方同意。 1.2 线程 有了进程后&#xff0c;就可以运…

【广州华锐互动】VR营销心理学情景模拟培训系统介绍

在高度竞争的汽车市场中&#xff0c;销售人员需要具备强大的专业知识、引人入胜的销售技巧&#xff0c;以及敏锐的市场洞察力。然而&#xff0c;传统的培训方式往往无法满足这些需求&#xff0c;因为它们往往忽略了实践的重要性。 为了解决这个问题&#xff0c;许多公司开始采用…

老卫带你学---leetcode刷题(215. 数组中的第K个最大元素)

215. 数组中的第K个最大元素 问题&#xff1a; 给定整数数组 nums 和整数 k&#xff0c;请返回数组中第 k 个最大的元素。 请注意&#xff0c;你需要找的是数组排序后的第 k 个最大的元素&#xff0c;而不是第 k 个不同的元素。 你必须设计并实现时间复杂度为 O(n) 的算法解…

TCP/IP(十九)TCP 实战抓包分析(三)TCP 第一次握手 SYN 丢包

一 TCP 三次握手异常情况实战分析 说明&#xff1a; 本文是TCP 三次握手异常系列之一 ① 异常场景 接下里我用三个实验案例,带大家一起探究探究这三种异常关注&#xff1a; 如何刻意练习模拟上述场景 以及 wireshark现象 ② 实验环境 ③ 实验一&#xff1a;TCP 第一次握…

Python —— UI自动化之使用JavaScript进行元素点亮、修改、点击元素

1、JavaScript点亮元素 在控制台通过JavaScript语言中对元素点亮效果如下&#xff1a; 将这个语句和UI自动化结合&#xff0c;代码如下&#xff1a; locator (By.ID,"kw") # 是元组类型 web_element WebDriverWait(driver,5,0.5).until(EC.visibility_of_eleme…

Arduino驱动BMA220三轴加速度传感器(惯性测量传感器篇)

目录 1、传感器特性 2、硬件原理图 3、驱动程序 BMA220的三轴加速度计是一款具有I2C接口的超小型三轴低g加速度传感器断路器,面向低功耗消费市场应用。它可以测量3个垂直轴的加速度,从而在手机、手持设备、计算机外围设备、人机界面、虚拟现实功能和游戏控制器中感知倾斜、…

利用CSRF或XSS攻击网站的例子

利用 CSRF 攻击网站的简单示例&#xff1a; 假设有一个在线银行应用&#xff0c;用户可以在其中执行转账操作。用户登录后&#xff0c;系统会生成一个包含转账信息的表单&#xff0c;用户需要填写表单来发起转账。这个表单如下所示&#xff1a; <form action"https:/…

Python数据分析之numpy的使用

作者将自己学习numpy的代码笔记分享一下&#xff0c;想学哪一部分就把哪一部分的注释去掉即可&#xff0c;便于初学者学习和复习&#xff1a; import numpy as np主要是根据数据构建算法可能用到的矩阵&#xff0c;对于矩阵可以进行相应的处理变换#将一个列表输出成一维向量&a…

王道计算机考研 操作系统学习笔记 + 完整思维导图篇章五: IO管理

目录 IO设备的基本概念和分类 IO设备的分类 按使用特性分类 按传输速率分类 按信息交换单位分类 IO控制器 l/O设备的电子部件&#xff08;I/O控制器&#xff09; l/O控制器的组成 内存映像I/o vs.寄存器独立编址 IO控制方式 程序直接控制方式 中断驱动方式 DMA方式 ​编辑通…

java1.8流的新特性使用

案例描述 今天跟着黑马程序员的视频&#xff0c;完成“瑞吉外卖”项目的菜品信息管理模块的时候&#xff0c;遇到了一个比较陌生的写法 用到了Java8的新特性 stream().map((item) -> {}).collect() List<DishDto> collect records.stream().map((item) -> {DishDt…

Linux网络编程杂谈(聊聊网络编程背后的故事)

数据是如何传输到物理网络上的&#xff1f; 以TCP为例&#xff0c;当 TCP 决定发送数据时&#xff0c;这些数据需要经过多个处理阶段才能真正被传输到物理网络。其中一个关键步骤是将数据移动到网络接口卡 (NIC)。以下是这个过程的详细描述&#xff1a; 数据序列化: TCP 会为要…

10.17七段数码管单个多个(部分)

单个数码管的实现 第一种方式 一端并接称为位码&#xff1b;一端分别接收电平信号以控制灯的亮灭&#xff0c;称为段码 8421BCD码转七段数码管段码是将BCD码表示的十进制数转换成七段LED数码管的7个驱动段码&#xff0c; 段码就是LED灯的信号 a为1表示没用到a&#xff0c;a为…

文件读取结束的判定

大家好啊&#xff0c;我们今天来补充文件操作的读取结束的判定。 被错误使用的feof 牢记&#xff1a;在文件读取过程中&#xff0c;不能用feof函数的返回值直接用来判断文件的是否结束而是应用于当文件读取结束的时候&#xff0c;判断是读取失败结束&#xff0c;还是遇到文件尾…

快速排序(sort用法)

在头文件#include<algorithm>中 for (int i 0; i < m; i)cin >> arr[i];sort(arr, arr m);for (int i 0; i < m; i)cout << arr[i]; sort()函数可以对给定区间所有元素进行排序。 它有三个参数sort(begin, end, cmp)&#xff0c; 其中begin为指向…

Qt第六十五章:自定义菜单栏的隐藏、弹出

目录 一、效果图 二、qtDesigner 三、ui文件如下&#xff1a; 四、代码 一、效果图 二、qtDesigner 原理是利用属性动画来控制QFrame的minimumWidth属性。 ①先拖出相应的控件 ②布局一下 ③填上一些样式 相关QSS background-color: rgb(238, 242, 255); border:2px sol…

量子力学期末复习--1

量子力学解题技巧--1 基础知识 薛定谔方程 Ehrenfest 定理 不确定性原理&#xff1a;正则对易关系&#xff1a;自由粒子&#xff1a;对于自由粒子&#xff0c;分离变量解不代表物理上可实现的态。但其含时薛定谔方程的一般解仍旧是分离变量解的线性组合 典型题目 自由粒子…

Ajax 笔记/练习

Ajax 异步JavaScript和XML 作用 实现 HTML 在不整体刷新的情况下&#xff0c;通过后台服务器&#xff0c;请求数据并局部更新页面内容 操作流程 Ajax 使用 XMLHttpRequest 通过new 关键字可以创建XMLHttpRequest() 对象。 var req new XMLHttpRequest();方法和属性说明req.…

Rclone连接Onedrive

一、Rclone介绍 Rclone是一款的命令行工具&#xff0c;支持在不同对象存储、网盘间同步、上传、下载数据。 我们这里连接的onedrive&#xff0c;其他网盘请查看官方文档。 注意&#xff1a; 需要先在Windows下配置好了&#xff0c;然后再将rclone配置文件复制到Linux的rclone配…

Go语言中:list := make([]Item, 0) var list []Item 这两种写法有什么区别?

list : make([]Item, 0) 和 var list []Item 都是用于创建一个切片&#xff08;slice&#xff09;的语法&#xff0c;但它们在 Go 中有一些区别。 list : make([]Item, 0)&#xff1a; 这是一种使用 make 函数来创建切片的方式&#xff0c;其中 Item 是切片的元素类型。make 函…