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

  • 编程式导航路由跳转到当前路由(参数不变), 多次执行会抛出NavigationDuplicated的警告错误?已关闭评论
  • 179 次浏览
  • A+
所属分类:Web前端
注意:编程式导航(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的一个实例对象 })