vue router 报错: Uncaught (in promise) NavigationDuplicated {_name:““NavigationDuplicated“... 的解决方法

原文有更新,如没有解决请查看原文哦

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.youkuaiyun.com/weixin_43202608/article/details/98884620

今天在写项目时发现了在点击 router-link 会造成报错的问题, 报错内容为: 在这里插入图片描述

废话不多说,解决方法很简单,把项目依赖的 node_modules 文件夹删除, 然后再 npm install 重新下载依赖包就可以解决。

=========================================================================
2019年8月13日更新

发现以上方法很多人都不能成功解决,经过多次尝试发现原因可能是 在重新下载依赖包时,安装的vue-router还是之前出错的那个版本,那么要怎么解决呢?解决方法也很简单,在项目目录下运行 npm i vue-router@3.0 -S 即可

如果不想换 vue-router 的版本 或者 还是 没有用,那么可以用以下方法
在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)
}
### 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'); ``` 利用可选链运算符(`?.`)能够有效防止程序崩溃,并提供默认替代值以防万一原始路径不可达。 --- ### 结论 针对上述几种典型场景分别采取对应的措施即可大幅减少甚至完全消除此类异步编程过程里产生的意外状况。当然实际开发过程中还需要结合具体情况灵活运用这些技巧。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值