问题描述

在 vue 项目中，重复单击路由会报以下错误，虽然不影响程序的正常运行，但赤裸裸的显示在控制台实在令人不爽，所以还是想办法解决这个错误。

Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/users".
    at createRouterError (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1958:15)
    at createNavigationDuplicatedError (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1928:15)
    at HTML5History.confirmTransition (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2222:18)
    at HTML5History.transitionTo (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2152:8)
    at HTML5History.push (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2519:10)
    at eval (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2950:22)
    at new Promise (<anonymous>)
    at VueRouter.push (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2949:12)
    at VueComponent.changeMenu (webpack-internal:///./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/menu/menu.vue:45:20)
    at VueComponent.invoker (webpack-internal:///./node_modules/vue/dist/vue.esm.js:2127:18)

解决方案

在 router/index.js 或 main.js 中添加以下代码：

import Router from 'vue-router'

// 解决路由重复单击错误
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch((err) => err)
}

参考文档

1. NavigationDuplicated Navigating to current location (“/search”) is not allowed
2. Throw Error “NavigationDuplicated” #2872