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.hqwc.cn/news/208930.html

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

相关文章

【HarmonyOS】元服务卡片本地启动拉起加桌没问题,上架后拉起加桌时卡片展示异常

【关键字】 加桌选卡展示异常 、 2卡共用一个布局 、 代码混淆 【问题现象】 元服务卡片在本地启动拉起加桌时,多卡的选卡过程显示是没问题的。但是在上架后拉起加桌时,多卡的选卡过程卡片展示异常。 代码逻辑是通过创建卡片的时候判断卡片的尺寸大小…

Redisson分布式锁源码解析

一、使用Redisson步骤 Redisson各个锁基本所用Redisson各个锁基本所用Redisson各个锁基本所用 二、源码解析 lock锁 1) 基本思想: lock有两种方法 一种是空参 另一种是带参 * 空参方法:会默认调用看门狗的过期时间30*1000&…

UDP中connect的作用

udpclientNoConnect.c里边的内容如下&#xff1a; #include<stdio.h> #include<stdlib.h> #include<string.h> #include<unistd.h> #include<arpa/inet.h> #include<sys/socket.h> #include <errno.h> #include <syslog.h…

COMSOL 多场耦合仿真技术与应用”光电常见案例应用

(一)案列应用实操教学&#xff1a; 案例一 光子晶体能带分析、能谱计算、光纤模态计算、微腔腔膜求解 案例二 类比凝聚态领域魔角石墨烯的moir 光子晶体建模以及物理分析 案例三 传播表面等离激元和表面等离激元光栅等 案例四 超材料和超表面仿真设计&#xff0c;周期性超表面…

数据结构(超详细讲解!!)第二十四节 二叉树(上)

1.定义 二叉树&#xff08;Binary Tree&#xff09;是另一种树型结构。 二叉树的特点&#xff1a; 1&#xff09;每个结点至多只有两棵子树&#xff08;即二叉树中不存在度大于2的结点&#xff09;&#xff1b; 2&#xff09;二叉树的子树有左右之分&#xff0c;其次序…

【追求卓越12】算法--堆排序

引导 前面几节&#xff0c;我们介绍了有关树的数据结构&#xff0c;我们继续来介绍一种树结构——堆。堆的应用场景有很多&#xff0c;比如从大量数据中找出top n的数据&#xff1b;根据优先级处理网络请求&#xff1b;这些情景都可以使用堆数据结构来实现。 什么是堆&#xf…

二、类与对象(二)

8 this指针 8.1 this指针的引入 我们先来定义一个日期的类Date&#xff1a; #include <iostream> using namespace std; class Date { public:void Init(int year, int month, int day){_year year;_month month;_day day;}void Print(){cout << _year <&l…

golang学习笔记——罗马数字转换器

文章目录 罗马数字转换器代码 参考LeetCode 罗马数字转整数代码 罗马数字转换器 编写一个程序来转换罗马数字&#xff08;例如将 MCLX 转换成 1,160&#xff09;。 使用映射加载要用于将字符串字符转换为数字的基本罗马数字。 例如&#xff0c;M 将是映射中的键&#xff0c;其值…

范围查询 range级别 继续优化思路

问题&#xff1a; 这几天工作遇到了一个问题。千万级别的表&#xff0c;每秒钟产生很多数据&#xff0c;select count(id) from table where flag 1 and create_time < 2023.11.07;分区表&#xff0c;range级别&#xff0c;已经是走create_time列上的索引&#xff0c;flag…

基于SpringBoot+Redis的前后端分离外卖项目-苍穹外卖(七)

分页查询、删除和修改菜品 1. 菜品分页查询1.1 需求分析和设计1.1.1 产品原型1.1.2 接口设计 1.2 代码开发1.2.1 设计DTO类1.2.2 设计VO类1.2.3 Controller层1.2.4 Service层接口1.2.5 Service层实现类1.2.6 Mapper层 1.3 功能测试1.3.2 前后端联调测试 2. 删除菜品2.1 需求分析…

vue3项目中使用富文本编辑器

前言 适配 Vue3 的富文本插件不多&#xff0c;我看了很多插件官网&#xff0c;也有很多写的非常棒的&#xff0c;有UI非常优雅让人耳目一新的&#xff0c;也有功能非常全面的。 如&#xff1a; Quill&#xff0c;简单易用&#xff0c;功能全面。editorjs&#xff0c;UI极其优…

风电场叶片运输车模型-FBX格式-带动画-数字孪生场景搭建

FBX格式的风电场中叶片运输车辆模型&#xff0c;按照真实尺寸建模&#xff0c;车辆多个部位带动画效果&#xff0c;适用于风电场三维数字化场景和风电场数字孪生使用&#xff0c;也可以用来作为各种三维平台的测试模型。 模型效果图 下载地址 叶片运输车模型下载地址