重复点击同一个菜单路由 报错NavigationDuplicated

重复点击的现象

连续点击同一个路由，第二次点击时报错NavigationDuplicated。
如图所示：

解决方案

方案一、2021.08（新）

vue-router引入的地方加上如下代码段即可

import VueRouter from 'vue-router'
// 解决重复点击菜单导航报错：NavigationDuplicated 的问题
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}

参考文章：
https://www.cnblogs.com/rever/p/11577322.html

方案二、可不看，记录解决问题过程（老）

1、对比

另一个系统没有出现这个问题，对比两个系统使用的element-ui的版本果然不同。

2、解决

于是查看当前系统的package-lock.json中所使用的element-ui版本为2.8.2

"element-ui": {
  "version": "2.8.2",
  "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.8.2.tgz",
  "integrity": "sha512-LABKHKGUyewFNvpf9BQLecB659Wq0XYvyP1tBveZ4RWpdlPSylDfGW/RLvDYU7zuCBoRasdZAz7ryjOwq1lLNg==",
  "requires": {
	"async-validator": "1.8.5",
	"babel-helper-vue-jsx-merge-props": "2.0.3",
	"deepmerge": "1.5.2",
	"normalize-wheel": "1.0.1",
	"resize-observer-polyfill": "1.5.0",
	"throttle-debounce": "1.1.0"
  }
},

删除此段内容，重新在系统目录文件夹下运行命令

npm install

安装完成后查看package-lock.json中所使用的element-ui版本为2.12.0

"element-ui": {
  "version": "2.12.0",
  "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.12.0.tgz",
  "integrity": "sha512-DapyT0PW4i/1ETPHk8K8Qbe8B6hj10+dXsRTrOTFryV9wAs6e9mCxbV65awokyR2/v/KuIHJmqX+mH3wUa4rOQ==",
  "requires": {
	"async-validator": "1.8.5",
	"babel-helper-vue-jsx-merge-props": "2.0.3",
	"deepmerge": "1.5.2",
	"normalize-wheel": "1.0.1",
	"resize-observer-polyfill": "1.5.0",
	"throttle-debounce": "1.1.0"
  }
},

再次运行系统，登录后连续点击同一个菜单路由，不再报错。

3、但是

当我还原到2.8.2的版本后再看，该问题又没有了……奇怪了先记录一下

其他知识点说明

package.json文件和package-lock.json文件
详见文章：
https://blog.youkuaiyun.com/Beam007/article/details/123850741

其他问题

1、短时间内，路由多次跳转会报错：

Uncaught (in promise) Error: Navigation cancelled from "/login" to "/home" with a new navigation.

因为默认"/“跳转到”/login"，"/login"里面有跳转到"/home"，所以报错。
发现如果在"/login"使用setTimeout延缓几秒可行，但使用nextTick不可行。
最终将默认"/“直接写成”/login"，甚至根据业务需求可以直接"/home"。
当然应该还有其他的解决方案，参考：
https://blog.youkuaiyun.com/weixin_47084275/article/details/108205775