解决vue在控制台的 NavigationDuplicated 报错

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

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

image.png


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

// 如果你的改了push还是没有生效，可以考虑改replace方法
// 修改路由replace方法,阻止重复点击报错
const originalReplace = Router.prototype.replace;
Router.prototype.replace = function replace(location) {
  return originalReplace.call(this, location).catch(err => err);
};