四种解决Vue中重复点击相同路由控制台报错问题（ Avoided redundant navigation to current location）

vue-router 升级到3.1.x 后，重复点击导航时，控制台出现报错 ，虽然不影响功能使用，但是看的就不舒服。

报错信息

Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location

报错原因

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

解决方法

【方法一】降低版本

npm i vue-router@3.0 -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) 
})