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

最新推荐文章于 2023-04-28 18:39:05 发布

Agoni___

最新推荐文章于 2023-04-28 18:39:05 发布

阅读量201

点赞数

分类专栏：前端小bug 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/Agoni___/article/details/129404241

版权

前端小bug 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述
编程式导航（push|replace）才会有这种情况的异常，但这种异常对于程序没有任何影响
声明式导航内部已经解决这种问题。
由于vue-router引入了promise，push方法返回值是promise，当传递参数多次且重复，会抛出异常，需要传入相应的成功的回调与失败的回调，就能捕获到promise的异常

第一种解决方法

this.$router.push({
                name: 'search',
                params: {
                    keyword:''||undefined
                },
                 query: {
                    k: this.keyword.toLocaleUpperCase()
                }
            },
            () => {},
            (err) => {} //传两个回调
      ) //但只能解决当前组件问题，其他组件还是会报错

第二种方法，重写push方法
push方法在VueRouter的原型对象上，注册路由时组件上就添加了 $ro u t er 属性，属性值是 V u e R o u t er 构造函数的一个实例对象，所以 t hi s .$ router.push访问的是VueRouter.prototype.push

//需要重写VueRouter.prototype原型对象身上的push|replace方法
//先把VueRouter.prototype身上的push|replace方法进行保存一份
let originPush = VueRouter.prototype.push;
let originReplace = VueRouter.prototype.replace;
//重写VueRouter.prototype身上的push方法 
VueRouter.prototype.push = function(location, resolve, reject) {
  //第一个形参：路由跳转的配置对象（query|params）
  //第二个参数：undefined|箭头函数（成功的回调）
  //第三个参数:undefined|箭头函数（失败的回调）
  if (resolve && reject) {
    //push方法传递第二个参数|第三个参数（箭头函数）
    //originPush：利用call修改上下文（this），变为(路由组件.$router)这个对象，第二参数：配置对象、第三、第四个参数：成功和失败回调函数
    originPush.call(this, location, resolve, reject);
  } else {
    //push方法没有第二个参数|第三个参数
    originPush.call(
      this,
      location,
      () => {},
      () => {}
    );
  }
};
//重写VueRouter.prototype身上的replace方法 
VueRouter.prototype.replace = function(location, resolve, reject) {
  if (resolve && reject) {
    originReplace.call(this, location, resolve, reject);
  } else {
    originReplace.call(
      this,
      location,
      () => {},
      () => {}
    );
  }
};