vue router 报错:Uncaught (in promise) NavigationDuplicated {_name: "NavigationDuplicated"...}

本文解决了一个常见问题:在项目开发中,使用Vue-router时,重复点击相同菜单路由导致的控制台报错现象。通过分析,发现此问题是由于vue-router版本升级至3.1.0后,路由跳转采用Promise方式处理造成的。提供了两种解决方案:一是降级vue-router至3.0.x版本;二是修改Router.prototype.push方法,捕获并忽略错误。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

问题(知其然)

触发操作:在项目开发中,重复点击当前菜单路由会报错,报错不影响功能使用
报错详情如下:
在这里插入图片描述

原因(知其所以然)

经过多方查找&实践,发现是vue-router的版本问题引起的。
vue-router的更新日志显示 v3.1.0 版本的路由跳转改用了 promise 的方式,针对于路由跳转相同的地址,如果没有捕获到错误,控制台始终会出现上面的错误

下方是vue-router v3.1.0 的更改记录,感兴趣的可以看一下
在这里插入图片描述

解决方法(亲测有用)
  1. vue-router降级,安装v3.0.x版本
  2. 在 import Router from ‘vue-router’ 后引入如下代码
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}
### Vue项目中Uncaught (in promise)网络错误的常见原因及解决方案 #### 1. Axios拦截器配置问题 如果在Axios中设置了全局拦截器,可能会因为后端返回的状态码不符合预期而导致`Uncaught (in promise)`错误。例如,在某些情况下,后端虽然成功返回了数据,但由于状态码不是预设值(如200),会被拦截并抛出异常[^1]。 可以通过调整Axios拦截器逻辑来解决问题。以下是改进后的代码示例: ```javascript import axios from 'axios'; // 配置请求拦截器 axios.interceptors.request.use(config => { return config; }, error => { return Promise.reject(error); }); // 配置响应拦截器 axios.interceptors.response.use(response => { const res = response.data; // 如果后端有自定义的成功标志位判断 if (res.code !== 200) { console.error('Error:', res.message); return Promise.reject(new Error(res.message || 'Request failed')); } else { return res; } }, error => { console.error('Network Error:', error); return Promise.reject(error); }); ``` --- #### 2. 路由重复导航引发的错误 当使用Vue Router时,如果尝试导航到当前已激活的路由地址,则会触发`Uncaught (in promise) NavigationDuplicated`错误[^2][^3]。这种问题通常发生在用户多次点击同一菜单项的情况下。 可以采用以下方法解决此问题: - **忽略重复导航** 通过捕获路由跳转中的错误并过滤掉特定类型的错误消息实现忽略功能。 ```javascript router.push({ path: '/target' }).catch(err => { if (err.name === 'NavigationDuplicated') { console.warn('Avoided redundant navigation'); } else { throw err; // 继续抛出其他未知错误 } }); ``` - **升级Vue Router版本** 确保使用的Vue Router版本与项目需求匹配。不同版本之间可能存在兼容性差异,建议查看官方文档确认所需依赖版本。 --- #### 3. 后端接口未正确处理Promise链 有时,前端调用了后端API却收到`Uncaught (in promise) Object`这样的模糊提示,这可能是因为后端未能按照约定格式返回JSON对象,或者缺少必要的字段导致解析失败[^4]。 验证后端接口是否满足以下条件: - 返回标准HTTP状态码; - 数据结构清晰明了,包含统一的结果标记(如success/failure)以及具体的消息描述; --- #### 4. 属性访问越界引起的TypeError 另一种常见的原因是试图读取尚未初始化的对象属性所造成的`Uncaught (in promise) TypeError`错误[^5]。比如下面的例子展示了如何安全地操作潜在为空的数据源: ```javascript const creatorInfo = data?.creator ?? {}; console.log(creatorInfo.avatarUrl || 'Default Avatar URL'); ``` 利用可选链运算符(`?.`)能够有效防止程序崩溃,并提供默认替代值以防万一原始路径不可达。 --- ### 结论 针对上述几种典型场景分别采取对应的措施即可大幅减少甚至完全消除此类异步编程过程里产生的意外状况。当然实际开发过程中还需要结合具体情况灵活运用这些技巧。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值