解决Vue报错：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location

最新推荐文章于 2025-05-18 11:30:30 发布
最新推荐文章于 2025-05-18 11:30:30 发布
阅读量1.8k 收藏 3
点赞数 5
CC 4.0 BY-SA版权
文章标签： 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_61766112/article/details/125819725
当在Vue应用中使用Vue Router进行页面跳转时，可能会遇到NavigationDuplicated错误。该错误表明尝试进行到已当前所在的位置。通过覆盖VueRouter.prototype.push方法并捕获错误，可以避免这个问题。只需添加一段代码，就能确保即使重复导航也不会抛出错误。

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

在点击一个路由跳转时，点击几次后浏览器就出现报错

Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location

解决方法

Vue.use(VueRouter)

 
const VueRouterPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (to) {
  return VueRouterPush.call(this, to).catch(err => err)
}
//加上这段代码就解决了

Together780
关注
Vue - 报错Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location
资深程序员
11-16 2338
vue2，vue2报错，浏览器控制台报错，vue2网页网站路由报错，vue中出现路由导航出现Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "xxx"，vue重复点击菜单报错怎么办，vue路由报错如何解决，vue怎么解决重复点击路由报错问题，解决Vue路由导航报错:NavigationDuplicated，成功解决，Vue路由导航报错，Vue - 报错Uncaught
前端开发：Vue项目报错NavigationDuplicated：Avoided redundant navigation to current location：“/XXX”的解决方法
全沾软贱开发攻城狮
01-18 1万+
最近在Vue项目开发的过程中遇到一个问题，那就是在点击同一个路由操作的时候，控制台会报一下错误提示： Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/Refund". 经过排查之后才发现是关于Vue中路由重复引起的错误，经过查找资料以及搜索相关知识，该报错原因是因为ElementUI导航栏里面的vue-router在3.0以上版本重复点击菜单引起的路由重复报
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location
qq_45796592的博客
04-19 3747
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location报错解决
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “/zhu“
weixin_48047636的博客
05-25 1212
错误原因：避免重复导航到当前路径 <template> <div> <input type="text" placeholder="搜索" @keyup.enter="goSky" /> <router-view /> </div> </template> <script> export default { methods: { goSky() { // 第一次跳转成功，.
问题处理：弹窗无法保存，报错 Uncaught (in promise)
最新发布
xuukai的博客
05-18 371
报错信息是 Uncaught (in promise)，表单中某些字段未通过验证规则（如 required: true 但未填写），导致提交失败。存在），程序会在验证失败后立即返回，不会继续执行后续的逻辑。模态框保持打开状态，用户可以修改表单数据后再次尝试提交。由于 err 不为 null 或 undefined，程序会执行 return。如果需要在验证失败时给用户一些反馈（如显示错误信息），可以在。，直接退出验证回调函数，不会继续执行后续的新增或编辑逻辑。验证时，出现了验证错误，如果表单验证失败（即。
解决Vue报错：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location...
程序员小明1024
12-17 7195
一、重复点击导航时，控制台出现报错 ，虽然不影响功能使用，但也不能坐视不管。 解决方案： 方案一：只需在 router 文件夹下，添加如下代码： import Vue from 'vue' import VueRouter from 'vue-router' import Home from '@/views/Home' import Main from '@/views/Main' imp...
解决：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location
weixin_71403100的博客
03-25 2401
问题：解决vue路由传递参数时，重复点击会抛出NavigationDuplicated的警告错误。原因：vue-router引入了promise, push的时候会返回一个promise。解决方法一：给push方法直接传成功和失败的回调函数。解决方法二：在路由内重写push或replace方法。
出现 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation 问题
will5451的博客
05-06 3238
出现 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation 问题 主要原因是Vue 重复点击相同路由造成的： 解决方案： 第一种：在 router 文件夹下里面的文件index.js里面找到如下位置： // src/router/index.js Vue.use(Router) const router =new Router({ ...
vue2里面的Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location
weixin_47652940的博客
11-26 777
注意，Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location不影响程序的执行效果，只是控制台会爆红，不在意可以不去修改，并且vue3中不会出现这种情况。这里的location告诉原来的push、replace方法往哪里跳转，传递哪些参数；resolve是成功的回调，reject是失败的回调。
前端vue报错Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current
xixi19980804的博客
11-10 544
前端vue报错Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “/sear
dw将限制条件全部检测通过后才能提交表单
11-24 691
处理搜索按钮按下两次及以上的报错问题
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “/..“
weixin_43665351的博客
11-18 286
当路由重复点击时，出现报错 解决方案： 在路由index.js文件中添加 const originPush = VueRouter.prototype.push VueRouter.prototype.push = function push (location) { return originPush.call(this, location).catch(err => err) }
vue报错Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “
Enjsky.G的博客
05-07 407
vue报错 vue使用路由时报如下错误： 报错原因 这个报错是在路由中重复点击路径 ，造成路由路径重复，从而引起异常，还有一种可能是安装的vue-router版本不是最新的或是错误版本引起异常。 解决方案 重新安装vue-router即可。安装命令如下： 【命令】： npm i vue-router@3.0 -S 【温馨提示】在项目目录中执行命令。 结束语 本章主要解决了vue-router 报异常的相关问题，若有疑问或不足，欢迎留言一起讨论。 ...
VUE路由重复错误
qq_32234855的博客
07-16 969
说明文档: 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) NavigationDuplicated: Avoided redundant navigation 问题
热门推荐
qq_36437172的博客
08-27 4万+
问题描述：重复点击导航时，控制台出现报错 ，虽然不影响功能使用，但也不能视而不见。 解决方案： 方案一：只需在 router 文件夹下，添加如下代码： // src/router/index.js Vue.use(Router) const router = new Router({ routes }) constVueRouterPush=Router.prototype.push Router.prototype.push=functionpush(to){ retur...
解决Vue报错: Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current locatio
weixin_51696862的博客
09-06 2644
main.js。
vue中Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation报错的解决
jiangjunyuan168的博客
11-23 5339
问题： 当重复点击相同导航时，控制台显示的Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation报错。 解决方法： 1、在router配置文件（/router/index.js）下添加 const VueRouterPush = Router.prototype.push Router.prototype.push = function push (to) { return VueRouterPush.call(t
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/abou
09-07
在使用Vue.js框架开发单页面应用（SPA）时，我们可能会遇到一个错误提示："Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location"。这个错误通常发生在使用Vue Router...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值