Vue. 之 报错 Uncaught (in promise)

最新推荐文章于 2024-05-22 14:06:40 发布
转载 最新推荐文章于 2024-05-22 14:06:40 发布 · 510 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/Charles-Yuan/p/11516676.html

本文解决了一个常见的Vue.js开发问题，即在点击同一URL时出现的路由错误。通过升级vue-router到3.0版本，可以有效避免此问题，确保应用程序的稳定运行。

vue，路由配置完点击出错！

　　在点击同一个URL的时候，会报错如下：

 

 

 　　

　　解决方案： 

　　　　在项目目录下运行 npm i vue-router@3.0 -S 即可。

 

　　　　

转载于:https://www.cnblogs.com/Charles-Yuan/p/11516676.htm

Vue - 报错Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location
🏆 前端领域优质创作者
11-16 2551
vue2，vue2报错，浏览器控制台报错，vue2网页网站路由报错，vue中出现路由导航出现Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "xxx"，vue重复点击菜单报错怎么办，vue路由报错如何解决，vue怎么解决重复点击路由报错问题，解决Vue路由导航报错:NavigationDuplicated，成功解决，Vue路由导航报错，Vue - 报错Uncaught
Vue - 报错Uncaught (in promise) TypeError: Cannot destructure property ‘type‘ of ‘vnode‘ as it is null
最新发布
🏆 前端领域优质创作者
04-24 1万+
vue2，vue3，Vue报错，vue 提示错误，vue TypeError: Cannot destructure property 'type' of 'vnode' as it is null.，vue控制台出现错误，vue运行报错，VUE启动报错，vue打包报错，vue切换页面报错，Vue突然报错，点击页面时报错，不定时报错，vue报错无法破坏“vnode”的属性“type”，因为它为null，vue项目如何解决报错，vue页面无法切换且报错，vue3报错，vue2报错，Vue表格报错，在 vue2
vue2里面的Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location
weixin_47652940的博客
11-26 819
注意，Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location不影响程序的执行效果，只是控制台会爆红，不在意可以不去修改，并且vue3中不会出现这种情况。这里的location告诉原来的push、replace方法往哪里跳转，传递哪些参数；resolve是成功的回调，reject是失败的回调。
Uncaught (in promise) NavigationDuplicated
weixin_45655781的博客
08-12 472
这里写自定义目录标题Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/nodeConfig". Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “/nodeConfig”. 在项目目录下运行 npm i vue-router@3.
vue2: vue-router@3.6.3 报错 Uncaught (in promise) NavigationDuplicated
LlanyW的专栏
12-16 3172
声明式导航是没有这种问题的，这是因为 vue-router 底层已经处理好了。而编程式导航连续点击进行路由跳转的时候，就会在控制台抛出 Uncaught (in promise) NavigationDuplicated 错误信息，错误信息如下：这是因为版本升级到了 v3.1.0 之后，push 和 replace 方法会返回一个 promise，如果没有对错误进行捕获，那么控制台就会输出未捕获异常。
vue3 - 报错Uncaught (in promise) TypeError: Converting circular structure to JSON --＞ starting at obje
高级前端工程师
05-22 6675
vue3，报错，json，element-plus，ant design vue，antd，组件报错，vue报错解决，vue3 Uncaught (in promise) TypeError: Converting circular structure to JSON --> starting at object with constructor ‘Object’ | property ‘vnode’ -> object with constructor ‘Object’— property ‘compon
解决Vue-Router升级导致的Uncaught (in promise)问题
11-19
在升级Vue-Router至3.1.0及以上版本后，开发者可能会遇到一个常见的问题：在进行路由跳转时，控制台会抛出`Uncaught (in promise)`错误。这个错误的出现是由于Vue-Router从3.1.0版本开始，`push`和`replace`方法开始...
vue报错：Uncaught (in promise) TypeError: Cannot read property ‘$message‘ of undefined
qq_45791799的博客
07-30 6710
今天项目搭建的时候遇到一个问题： Uncaught (in promise) TypeError: Cannot read property '$message' of undefined 看到这里我知道肯定是elementui的messagebox组件出现了问题，查看elementui的官方文档， 全局方法 如果你完整引入了 Element，它会为 Vue.prototype 添加如下全局方法：$msgbox, $alert, $confirm 和 $prompt。因此在 Vue instance 中
Uncaught (in promise) NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicat
qq_25983579的博客
12-05 451
问题描述: vue重复点击菜单的时候报错 Uncaught (in promise) NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicat 处理方式 在main.js加入以下代码，再次点击就不报错了 const originalPush = Router.prototype.push Rou...
Uncaught (in promise) NavigationDuplicated——VUErouter报错
HarryHY的博客
11-13 311
在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 =&...
vue 路由Uncaught (in promise) NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDu
wuyunhongw的博客
11-07 323
1、路由点击返回时或者点击 router-link 会造成 报错时。 解决方法是： 添加这段代码，就可以解决报错 const originalPush = Router.prototype.push; Router.prototype.push = function push (location) { return originalPush.call(this, location).catch...
uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current loaction ‘xxxxxx
Yuan_Xiao_Tian_的博客
10-27 741
解决方法：在路由内重写push或replace方法。本文仅记录自己遇到的问题。
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “/home
qq_42449963的博客
09-30 977
在添加如下步骤后报错，但是不影响使用： activated(){ this.$router.push(this.path); }, 解决办法： 在src目录下面的router文件夹下的index.js中加入如下代码，错误消失 import Vue from 'vue' import VueRouter from 'vue-router' const originalPush = VueRouter.prototype.push VueRouter.prototype.push = funct
关于Uncaught (in promise) NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplic
weixin_43675173的博客
11-13 7953
关于Uncaught (in promise) NavigationDuplicated {_name: “NavigationDuplicated”, name: "NavigationDuplic}的报错问题 针对上述图片中的报错，解决方法如下， 点击第一次报错，如果在这个点击页面 在点击一次router-link 就会报这个错 但是不影响功能，在此情况下，可以在router文件夹的inde...
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location
qq_45796592的博客
04-19 3840
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location报错解决
VUE路由重复错误
qq_32234855的博客
07-16 1016
说明文档: https://github.com/vuejs/vue-router/releases?after=v3.3.1 只是遇到了这种情况，然后搬运教程里面的解决方式 1.产生错误的情况：编程式路由跳转到当前路径且参数没有变化时会抛出 NavigationDuplicated(重复导航) 错误 2.原因分析: vue-router3.1.0之后, 引入了push()的promise的语法, 如果没有通过参数指定回调函数就返回一个promise来指定成功/失败的回调, 且内部会判断如果要跳转的路径和.
vue项目报错Uncaught (in promise) 网络错误......
03-16
### 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、付费专栏及课程。

余额充值