Vue 重写push的方法 （NavigationDuplicated报错原因及解决方法）

在学习vue编程式导航时的对象写法，我们会发现如果多次执行会抛出NavigationDuplicated警告错误（声明式导航不会报错，因为vue-router底层已经处理好了）

报错原因

因为vue-router引入了promise

我们可以试着输出push方法的返回结果

并且可以看出结果是一个promise

let result = this.$router.push({name:"search",params:{keyword:this.keyword},query:{k:this.keyword.toUpperCase()}})
console.log(result);

 

 我们知道promise函数需要传入成功与失败的回调，这也就是会报错的原因了（不了解promise的同学可以先学习下promise）

解决方法

简易方法

通过给push方法传递相应的成功与失败的函数，可以捕获到当前错误

this.$router.push({name:"search",params:{keyword:this.keyword},quer