解决vue在控制台的 NavigationDuplicated 报错

解决vue在控制台的 NavigationDuplicated 报错

复现

vue router 升级到3.1.x 后，重复点击导航时（连续点击相同路由链接）控制台出现报错 {_name: "NavigationDuplicated", name: "NavigationDuplicated"}，虽然不影响功能使用，但也不能视而不见。

原因

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

解决方法一

// 在引用vue-router的页面添加一段代码

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

解决方法二（推荐）

// 补齐 router.push() 的第三个参数

this.$router.push(route, () => {}, (e) => {
    console.log('输出报错',e) 
})

解决方法三（推荐）

// 捕获 router.push 异常

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

---

后记，

解决办法有很多种，大家可自由选择。解决办法一看似一劳永逸，但是不利于业务理解。也有人提出降级解决，本人更推荐 【解决办法二 或 解决办法三】。