注意:编程式导航(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. JS函数传递参数是是按值传递

    JavaScript在传参的时候只有一种传递方法那就是按值传递(来自红宝书第四版本) 函数在传递参数的时候会把实参的值拷贝过来一份,而基础类型数据值是存在内存中,在拷贝的时候会复制出来一份,而引用类型 ...

  2. Centos7 使用pm2快速安装创建定时任务

    Centos7 安装 pm2 一丶拿到一个动态拨号的服务器还不用使用网络得先打开: pppoe-start 如果没有wget,需要先下载安装: yum install wget 二丶环境搭建 wget ...

  3. (转)Angular中的拦截器Interceptor

    什么是拦截器? 异步操作 例子 Session 注入(请求拦截器) 时间戳(请求和响应拦截器) 请求恢复 (请求异常拦截) Session 恢复 (响应异常拦截器) 转之:http://my.osch ...

  4. java高级用法之:JNA类型映射应该注意的问题

    目录 简介 String Buffers,Memory,数组和Pointer 可变参数 总结 简介 JNA提供JAVA类型和native类型的映射关系,但是这一种映射关系只是一个大概的映射,我们在实际 ...

  5. 马里奥制造,Ready~~GO!「GitHub 热点速览 v.22.16」

    作者:HelloGitHub-小鱼干 如果你有创造力,就可以以马里奥 Mario 为主角在 a-little-game-called-mario 中开启你的 Hell 模式 Mario:如果你想贡献代 ...

  6. 基于全志A40i开发板——Linux-RT内核应用开发教程(1)

    目录 1 Linux-RT内核简介 3 2 Linux系统实时性测试 3 3 rt_gpio_ctrl案例 10 4 rt_input案例 15 本文为Linux-RT内核应用开发教程的第一章节--L ...

  7. 【大话云原生】煮饺子与docker、kubernetes之间的关系

    云原生的概念最近非常火爆,企业落地云原生的愿望也越发强烈.看过很多关于云原生的文章,要么云山雾罩,要么曲高和寡. 所以笔者就有了写<大话云原生>系列文章的想法,期望用最通俗.简单的语言说明 ...

  8. 3.2 常用Linux命令

    1.ifconfig命令 ifconfig命令用于获取网卡配置与网络状态等信息,英文全称为"interface config",语法格式为"ifconfig [参数] [ ...

  9. 雪花算法生成分布式ID

    分布式主键ID生成方案 分布式主键ID的生成方案有以下几种: 数据库自增主键 缺点: 导入旧数据时,可能会ID重复,导致导入失败 分布式架构,多个Mysql实例可能会导致ID重复 UUID 缺点: 占 ...

  10. [题解] 序列(sequence)

    题目大意 给定一个长度为 \(N\)​ 的非负整数序列 \(A_1,A_2, \ldots ,A_N\)​,和一个正整数 \(M\)​.序列 \(A\) ​满足 \(\forall 1 \le i \ ...