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

本文主要是介绍编程式导航路由跳转到当前路由(参数不变), 多次执行会抛出NavigationDuplicated的警告错误?，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

注意:编程式导航（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的警告错误?的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！