解决Vue中重复点击相同路由控制台报错问题

vue-router 升级到3.1.x 后，重复点击导航时，控制台出现报错 ，虽然不影响功能使用，但也不能视而不见。

报错信息

报错原因

vue router ≥ v3.1 后 ，回调形式改成promise api了，返回的是promise，如果没有捕获到错误，控制台始终会出现如上图的警告。

解决方法

【方法一】降低版本

npm i [email protected] -S

【方法二】在router文件夹下增加下列代码

const routerPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return routerPush.call(this, location).catch(error=> error)
}

【方法三】捕获异常

// 捕获router.push异常
this.$router.push(route).catch(err => {
    console.log('输出报错',err)
})

【方法四】补齐router第三个参数

// 补齐router.push()的第三个参数
this.$router.push(route, () => {}, (e) => {
    console.log('输出报错',e) 
})