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的自动配置原理都在这里了

💗推荐阅读文章💗 🌸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…

学习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;按住…

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

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

电磁优化的并行空间映射方法

空间映射(SM)是一种公认的加速电磁优化的方法。现有的SM方法大多基于顺序计算机制。本文提出了一种用于电磁优化的并行SM方法。在该方法中&#xff0c;每次迭代开发的代理模型被训练以同时匹配多个点的精细模型。多点训练和SM使代理模型在比标准SM更大的邻域内有效。本文提出的…

[补题记录] Complete the Permutation(贪心、set)

URL&#xff1a;https://codeforces.com/group/OcmZ7weh45/contest/487583/problem/J 目录 Problem/题意 Thought/思路 Code/代码 Problem/题意 给出一个长度为 N 的序列&#xff0c;其中的元素都是奇数。 现在要求在两个奇数之间插入一个偶数&#xff0c;使得这三个数递增…

一个工具让你明白“万丈高楼平地起”,拒绝重复造轮子!

大家在公司工作当中是不是很多时间装环境很麻烦&#xff0c;一个项目要上线了&#xff0c;开始网上搜了一边又一遍的环境搭建教程&#xff1f;等到下一个项目要上线了&#xff0c;又上网上搜了一边又一遍的环境搭建教程。关键天花乱坠的互联网&#xff0c;找不到很靠谱的呀。有…

数组的移动

设计程序&#xff0c;给定包含N个整数的数组array&#xff0c;实现操作&#xff1a;前面各个整数顺序向后移动m个位置&#xff0c;最后的m个整数移动到最前面。方法&#xff1a;void move(int array[], int n,int m ) 输入要求 第一行输入两个整数N(1<N<1e6)和m(0<m&…

webpack 配置

1、基础配置 // node js核心模塊 const path require(path) // 插件是需要引入使用的 const ESLintPlugin require(eslint-webpack-plugin) // 自动生成index.html const HtmlWebpackPlugin require(html-webpack-plugin); // 将css文件单独打包&#xff0c;在index.html中…

如何做好项目管理?年薪百万项目大佬一直在用这11张图

大家好&#xff0c;我是老原。 日常工作中&#xff0c;我们会遇到各种大大小小的工作项目&#xff0c;如何能让项目保质保量的完成&#xff0c;是我们项目经理的目标。 项目管理的流程可以说是由一系列的子过程组成的&#xff0c;它是一个循序渐进的过程&#xff0c;所以不能…

进程API

linux下进程的api forkwaitexec fork #include <stdio.h> #include <stdlib.h> #include <unistd.h>/* linux环境运行 子进程并不是完全拷贝了父进程。具体来说&#xff0c;虽然它拥有自己的 地址空间&#xff08;即拥有自己的私有内存&#xff09;、寄存器…

【Delphi】使用TWebBrowser执行JavaScript命令传入JSON参数执行出错解决方案

目录 一、问题背景&#xff1a; 二、实际示例&#xff1a; 三、解决方案&#xff1a; 1. Delphi 代码&#xff1a; 2. javaScript代码&#xff1a; 一、问题背景&#xff1a; 在用Delphi开发程序&#xff0c;无论是移动端还是PC端&#xff0c;都可以很方便的使用TWebBrows…