注意:编程式导航(push|replace)才会有这种情况的异常,声明式导航是没有这种问题,因为声明式导航内部已经解决这种问题。
这种异常,对于程序没有任何影响的。
为什么会出现这种现象:
由于vue-router最新版本3.5.2,引入了promise,当传递参数多次且重复,会抛出异常,因此出现上面现象,

第一种解决方案

//是给push函数,传入相应的成功的回调与失败的回调,可以捕获到当前的错误,可以解决。
this.$router.push(
{
name: "search",
// path: "/search",
params: {
keyword: this.keyword,
},
query: {
k: this.keyword.toUpperCase(),
},
},
() => {}, //在这里传入成功的回调
() => {} //在这里传入失败的回调
);
//第一种解决方案可以暂时解决当前问题,但是以后再用push|replace还是会出现类似现象,因此我们需要从‘根’治病;

第二种解决方案

//重写push和replace方法,在我们的router/index.js下
//重写push和replace方法
//先将VueRouter原型上的push和replace方法备份一份
let originPush = VueRouter.prototype.push
let originReplace = VueRouter.prototype.replace //重写
//第一个参数,告诉原来push方法你要往哪里跳转(传递那些参数)
//第二个参数:成功的回调
//第三个参数:失败的回调
//call和apply的区别
//相同点:都可以调用函数一次,都可以改变函数的this
//不同点:传递多个参数时,call传递参数用逗号隔开,apply传递一个数组
VueRouter.prototype.push = function (location, resolve, reject) {
if (resolve && reject) {
originPush.call(this, location, resolve, reject)
} else {
originPush.call(this, location, () => { }, () => { })
}
}
VueRouter.prototype.replace = function (location, resolve, reject) {
if (resolve && reject) {
originReplace.call(this, location, resolve, reject)
} else {
originReplace.call(this, location, () => { }, () => { })
}
}
//这样就可以根治掉这个问题了

重写push和replace方法,我们需要了解

this是当前的组件实例对象,当我们在入口文件注册路由VueRouter的时候,会给组件实例添加两个属性,一个$route和$router。
$router:这个属性,属性值是VueRouter的一个实例对象,他的身上并没有push方法,push方法是VueRouter原型对象上的一个方法,它是借用的VueRouter原型上的push方法 $router是通过new VueRouter 出来的
function VueRouter(){ }
push方法是VueRouter原型对象上的一个方法
VueRouter.prototype.push = function({
//函数的this是VueRouter的一个实例对象
})

编程式导航路由跳转到当前路由(参数不变), 多次执行会抛出NavigationDuplicated的警告错误?的更多相关文章

  1. Vue 路由的编程式导航与history模式

    编程式导航 注意:官方文档写错了 通过javascript跳转 //第一种跳转方式 // this.$router.push({ path: 'news' }) // this.$router.pus ...

  2. vue编程式导航,命名路由

    //使用 window.location.href 的形式,叫做 编程式导航 绑定事件的形式 <template> <div class="goods-item" ...

  3. vue动态路由传值以及get传值及编程式导航

    1.动态路由传值 1.配置路由处 { path: '/content/:id', component: Content }, // 动态路由 2.对应页面传值 <router-link :to= ...

  4. VueRouter爬坑第四篇-命名路由、编程式导航

    VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...

  5. vue路由-编程式导航

    除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现. router.push(location, onComp ...

  6. vue编程式导航

    vue项目中使用到了组件间传值,通过路由跳转实现从产品页进入产品详情页查看功能. 使用了this.$router.push(编程式导航) product页面中:因为只需要遮住产品列表页来显示产品详情页 ...

  7. [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦

    一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...

  8. 11.vue-router编程式导航

    页面导航的两种方式 声明式导航:通过点击链接实现导航的方式,叫做声明式导航 例如:普通网页中的链接或vue中的 编程式导航:通过调用JavaScrip形式的API实现导航的方式,叫做编程式导航 例如: ...

  9. [vue]声明式导航和编程式导航

    声明式导航和编程式导航 共同点: 都能进行导航,都可以触发路由,实现组件切换 区别: 写法不一样,声明式导航是写在组件的template中,通过router-link来触发,编程式导航写在js函数中, ...

随机推荐

  1. FastAPI(六十六)实战开发《在线课程学习系统》接口开发--用户注册接口开发

    在前面我们分析了接口的设计,那么我们现在做接口的开发. 我们先去设计下pydantic用户参数的校验 from pydantic import BaseModel from typing import ...

  2. python2.7安装pyinstaller

    python2.7直接安装pyinstaller会报错,版本4与python2不兼容,所以我们安装时需指定兼容的pyinstaller版本号.安装命令如下: pip2 install pyinstal ...

  3. 深度理解springboot集成cache缓存之源码解析

    一.案例准备 1.创建数据表(employee表) 2.创建Employee实体类封装数据库中的数据 @AllArgsConstructor @NoArgsConstructor @Data @ToS ...

  4. 1、【Python运维脚本】Python 按时间删除和清空文件

    删除和清空文件,用shell的话一条命令就够了,Python要一堆命令. 但是为了学习Python,所以用于实战,就得这么干了. Python 按时间删除和清空文件 #!/usr/bin/python ...

  5. php第一次实验个人博客网站的设计编写①

    先上效果图: 网页代码:index.html <!DOCTYPE html> <html lang="en"> <head>     <m ...

  6. JS的URIencode方式

    BEGIN; 对需要传递的URL参数进行URLencode编码 刚开始浪费了很多时间都没搞出来,不知道怎么用.后面google到了不少解决方案,最终解决.转载下面内容: js对文字进行编码涉及3个函数 ...

  7. Java基础语法Day_06(面相对象和封装)

    第1节 描述类介绍与使用 day06_01_面向对象思想的概述 day06_02_面向对象思想的举例 day06_03_类和对象的关系 day06_04_类的定义 day06_05_对象的创建及其使用 ...

  8. 攻防世界-MISC:pure_color

    这是攻防世界高手进阶区的第六题,题目如下: 点击下载附件一,得到一张空白的png图片 用StegSolve打开,然后点击箭头(如下图所示) 多点击几次,即可得到flag 所以,这道题的flag如下: ...

  9. 视网膜血管分割代码(Pytorch实现)

    创建日期: 2021-12-24 17:00:00 update log(2021.12.24):B站视频删除了,回放看了一下,讲的不太行......2333,时间过得真快,转眼就是2022年了啊 2 ...

  10. 图文详解:小白也能看懂的 Kubernetes

    Kubernetes 这个单词来自于希腊语,含义是舵手或领航员 .其词根是 governor 和 cybernetic.K8s 是它的缩写,用 8 字替代了"ubernete". ...