根本原因是 Vue Router 3.1+ 对重复导航的 Promise rejection 未捕获，Layui 按钮反复点击触发相同 $router.push 导致报错；应通过重写 push/replace 原型方法全局捕获错误，或在调用处加路径判重。
这不是 Layui 的问题，是 Vue Router 的行为 —— 你项目里混用了 Layui 组件（比如菜单、按钮）触发了 Vue 的 router.push，而当前路由没变，就抛出这个错误。
为什么 Layui 按钮点击会触发 NavigationDuplicated？
常见于用 Layui 的 nav 或 tab 控件绑定 Vue 路由跳转，例如：
layui.use('element', function(){
var element = layui.element;
element.on('nav(demo)', function(elem){
// 这里调用了 Vue 实例的 router
vm.$router.push('/user/list');
});
});
当用户反复点击「用户列表」菜单项，vm.$router.push('/user/list') 就会多次执行，而目标路径与当前一致，Vue Router 3.1+ 默认拒绝冗余导航并 reject Promise，未捕获就报错。
- 错误本质是未处理 Promise rejection，不是路由配置或 Layui 本身有 bug
- 即使路径带参数，只要最终解析为相同
route.fullPath（如/user/list和/user/list?tab=1在无 query 处理时也可能等价），同样触发 - Layui 不参与 Vue 响应式，所以不会自动防抖或判重 —— 这个责任在你调用
$router.push的那一层
router.push 报错但页面没崩，能不管吗？
不能。虽然 UI 表现正常，但后果包括：
- 控制台持续刷
Uncaught (in promise) NavigationDuplicated，干扰真实错误排查 - 某些浏览器（如旧版 Safari）可能因未处理的 Promise rejection 导致后续异步逻辑静默失败
- CI/CD 中的前端监控（如 Sentry）会把这类错误当成异常上报，污染数据
- Vue Router 4（Vue 3）中该错误默认不被忽略，未处理会直接中断导航链
最稳妥的修复方式：重写 VueRouter.prototype.push
在 router/index.js（或你创建 VueRouter 实例的地方）顶部插入：
import VueRouter from 'vue-router'
const originalPush = VueRouter.prototype.push
const originalReplace = VueRouter.prototype.replace
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)
}
VueRouter.prototype.replace = function replace(location, onResolve, onReject) {
if (onResolve || onReject) {
return originalReplace.call(this, location, onResolve, onReject)
}
return originalReplace.call(this, location).catch(err => err)
}
- 这段代码只拦截未传回调的调用，保留原有回调能力（比如需要跳转后滚动到顶）
- 对所有
this.$router.push和router.push全局生效，包括 Layui 里手动调用的场景 - 注意顺序：必须放在
new VueRouter({ ... })之前，否则原型已被冻结 - Vue Router 4 用户需改用
createRouter+router.push().catch()方式，不能直接改 prototype
临时绕过：Layui 侧加简单防重
如果暂时无法改路由层，可在 Layui 事件里加一层判断：
element.on('nav(demo)', function(elem){
const targetPath = '/user/list'
if (vm.$route.path !== targetPath) {
vm.$router.push(targetPath)
}
})
- 仅适用于路径级判断，不处理 query / hash 变化
- 若目标是命名路由（如
{ name: 'UserList' }），需用vm.$router.resolve({ name: 'UserList' }).href对比，否则$route.path不可靠 - 别用
setTimeout或disabled按钮模拟防抖 —— Layui 的 DOM 不受 Vue 管控，状态不同步易出错
真正要留心的是：Layui 和 Vue 混用时，路由跳转的“控制权”实际在 Vue Router 手里，Layui 只是触发器。错误提示看似来自前端框架组合，根子却在 Promise 错误未兜底 —— 这类问题一旦漏掉，会在多页应用、嵌套路由、keep-alive 场景下突然放大。
