Vue 重写push和replace方法,解决:Avoided redundant navigation to current location

当我们使用编程式路由导航跳转路径时,如果我们两次携带同样的参数进行跳转,会进行页面报错:

那产生这个问题的原因是什么呢?

我们接收并输出调用push方法返回的结果:

会发现这是一个Promise对象 

我们都知道,我们在使用一个Promise对象是时候需要配置成功执行函数和失败回调函数,

所以我们只需要在使用push方法的时候额外传入一个成功回到函数和一个失败回调函数即可。

但是使用这种方法治标不治本,难道我们每一次调用push和replace都要额外写两个回调函数吗?

所以,为了书写便捷,我们可以重写push 方法和replace 方法:

首先我们需要搞清楚push方法在哪儿:

既然push方法是我们引入的vue-router中的方法,那么我们就去找创建$router 的实例对象

我们输出一下引入的VueRouter构造函数,会发现在其prototype下的push方法和replace方法

那么我们就对VueRouter.prototype.push 和 VueRouter.prototype.replace 进行重写。

在router 配置文件中编写如下代码即可:

// 引入router
import VueRouter from "vue-router";// 保存一份原来的push 和 replace 方法
let originPush = VueRouter.prototype.push;
let originReplace = VueRouter.prototype.replace;// 重写push方法
// push接受三个参数:配置项、成功回调函数、失败回调函数
VueRouter.prototype.push = function (location, resolve, reject) {// 如果用户自定义了成功回调函数和失败回调函数if (resolve && reject) {// 直接调用原方法,并传递用户配置的回调函数// 注意这里需要把originPush的指向改为VueRouter// 使用call方法能够调用函数一次,传递参数使用逗号隔开;apply方法使用数组隔开originPush.call(this, location, resolve, reject);} else {// 如果用户没有自定义回调函数,那么我们手动传入两个空函数originPush.call(this, location, () => {}, () => {});}
};// 重写replace方法
VueRouter.prototype.replace = function (location, resolve, reject) {if (resolve && reject) {originReplace.call(this, location, resolve, reject);} else {originReplace.call(this, location, () => {}, () => {});}
}

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

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

相关文章

SAP_ABAP_面试篇_关于Function Module函数的三种处理类型

关于 Function Module 这个技术点,在面试过程中一般会考察以下几个问题: 1 函数处理类型的更新模式 一般会问到异步和事务(逻辑单元 LUW),异步函数的调试方式、SM13监控更新函数的执行过程(V1 与 V2 模式…

Epub书籍阅读工具

Epub书籍阅读工具 前言WIndows总结Neat ReaderAquile ReaderWPS Android总结Neat Reader掌阅 前言 Epub文件为电子书文件格式,此格式的电子书相比txt书籍,增加了目录跳转功能,并可以显示图片。本文介绍WIndows和Android端的epub书籍阅读工具…

SpringBoot中的classpath都包含啥

一句话总结:classpath 等价于 main/java main/resources 第三方jar包的根目录。下面详细解释。 参考:SpringBoot中的classpath

使用Burp发送请求,左下角显示Unsupported or unrecognized SSL message

这个问题很简单,那就是源网址使用http协议 而不是https协议

来吧,SpringBoot的自动配置原理都在这里了

💗推荐阅读文章💗 🌸JavaSE系列🌸👉1️⃣《JavaSE系列教程》🌺MySQL系列🌺👉2️⃣《MySQL系列教程》🍀JavaWeb系列🍀👉3️⃣《JavaWeb系列教程》…

Java架构师软件架构风格

目录 1 数据流风格1.1 管道过滤器1.2 数据流风格的优点2 调用返回风格2.1 面向对象风格2.2 调用返回风格总结3 独立构件风格3.1 事件驱动系统风格的主要特点3.2 独立构件风格总结4 虚拟机风格4.1 虚拟机风格总结5 仓库风格5.1 仓库风格总结想学习架构师构建流程请跳转:Java架构…

8款宝藏级别的云端设计工具推荐

早年,UI设计师选择的工具有限,功能相对单一,大多数在线原型设计工具都是国外的,语言和网络都增加了设计工作的负担。如今,国内外有许多在线原型设计工具,不仅可以在浏览器上使用,而且还具有团队…

SpringBoot集成Swagger2登录功能和安全认证

本篇文章要实现的功能: 1.集成swagger2.集成swagger登录功能,访问 /swagger-ui.html需要先登录3.集成安全认证,访问接口时携带header 请求接口时携带了上一步输入的header参数和值 1.集成swagger jdk11,SpringBoot 2.7.13 pom…

内网配置git代理

http、https访问 [http]proxy socks5://192.168.102.xxx:xxxx [https]proxy socks5://192.168.102.xxx:xxx设置ssh访问 需要修改~/.ssh/config文件(), 没有的话新建一个. 同样仅为github.com设置代理需要注意~/.ssh/config文件权限为600,…

C语言 子函数调malloc申请内存返回给主函数使用——可行,但要注意

一般情况,子函数中动态申请内存,将地址返回给主函数,理论上应该也是可以的,需要子函数返回动态内存地址,主函数实参是相应的地址变量即可。只不过,主函数实参传入子函数之前,可能会将指针置空&a…

MatrixOne实战系列回顾 | 导入导出项目场景实践

本次分享主要介绍MatrixOne导入导出以及项目场景实践。将从四个方向为大家演示MatrixOne的功能,分别是数据的导入、导出、对接数据集成工具,以及Java连接实战。 数据导入会使用三种方式将数据导入至 MatrixOne中。分别是insert语句、load data语句还有s…

学习Opencv(蝴蝶书/C++)——3. OpenCV的数据类型

文章目录 1. 总览2. 基础类型2.0 基础类型总览2.1 cv::Vec<>类2.2 cv::Matx<>类2.3 cv::Point类(cv::Point3_< >和cv::Point_< >)2.4 cv::Scalar(cv::Scalar_)类2.5 cv::Size(cv::Size_)类、cv::Rect(cv::Rect_)类和cv::RotatedRect 类2.6 基础类型…

常见面试题-Redis 主从复制原理以及痛点

Redis 主从复制如何同步数据呢&#xff1f; 参考文章&#xff1a;https://blog.csdn.net/Seky_fei/article/details/106877329 https://zhuanlan.zhihu.com/p/55532249 https://cloud.tencent.com/developer/article/2063597 https://xie.infoq.cn/article/4cffee02a2a12c2…

LongAccumulator

原子操作之LongAccumulator 和LongAdder的区别在于&#xff0c;LongAdder是在Cell里面只能做加减操作&#xff0c;不能乘除&#xff0c;而LongAccumulator就可以定义乘除操作。原理和LongAdder都是一样的&#xff0c;一个Base和一个Cells数组。 原文跳转地址

pyqt5的组合式部件制作(四)

对组合式部件的制作又改进了一版&#xff0c;组合式部件的子部件不再需要单独“提升为”&#xff0c;如果在模板文件的提升部件窗口内选择了“全局包含”&#xff0c;那么只需要在模板文件和应用文件中直接复制粘贴即可&#xff0c;部件的应用更为简便。如下图&#xff1a;按住…

2023秋招上岸必备软件测试面试题

1、请结合你熟悉的项目&#xff0c;介绍一下你是怎么做测试的&#xff1f; -首先要自己熟悉项目&#xff0c;熟悉项目的需求、项目组织架构、项目研发接口等 -功能 接口 自动化 性能 是怎么处理的&#xff1f; -第一步&#xff1a; 进行需求分析&#xff0c;需求评审&#…

【Delphi】开发IOS 程序,TLabel 中英文字对齐(水平),一行代码解决显示对齐问题!

目录 一、问题现象&#xff1a; 二、解决方案&#xff08;一行代码解决ios对齐问题&#xff09;&#xff1a; 三、解决后效果&#xff1a; 四、后记&#xff1a; 一、问题现象&#xff1a; 在用 Delphi 开发ios程序时&#xff0c;使用TLabel控件显示&#xff0c;会出现中英…

WiFi 6的数据在发送端分片和在接收端重组的理解

802.11ax是WiFi 6标准&#xff0c;其引入了一些新的特性和技术来提升无线网络的性能&#xff0c;其中包括帧聚合和帧分片。以下是它们的详细处理流程&#xff1a; 1. 帧聚合 帧聚合是一种提高传输效率的技术&#xff0c;它允许多个数据帧被聚合到一起&#xff0c;然后作为一个…

layui(2.8.18)生成验证码

<!DOCTYPE html> <html> <head><meta charset"utf-8"><title>登入</title><meta name"renderer" content"webkit"><meta http-equiv"X-UA-Compatible" content"IEedge,chrome1&quo…

Go 工具链详解(七):模块缓存清理工具

go mod 缓存 在 Golang 中&#xff0c;模块是对一组版本化的包的集合的描述。Go 1.11 版本引入了模块支持&#xff0c;通过 go mod 命令提供了对模块的管理。Go 模块的一个重要特性是依赖管理&#xff0c;可以清晰地定义项目所依赖的模块及对应的版本&#xff0c;并确保代码使…