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

最新推荐文章于 2025-05-18 11:30:30 发布

Together780

最新推荐文章于 2025-05-18 11:30:30 发布

阅读量1.8k

点赞数 5

CC 4.0 BY-SA版权

文章标签：前端 vue.js

本文链接：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)
}
//加上这段代码就解决了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Together780

关注关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

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进行路由跳转时，尝试导航到一个已经是当前激活路由的地址。这个错误的原因是在某些情况下，比如在调用`router.push`或者`router.replace`方法时，如果目标路由是当前路由，就会触发这个警告。Vue Router默认情况下会阻止同一个路由的重复导航，以避免不必要的历史记录栈操作和重复渲染组件，这有助于防止可能的无限循环或者性能问题。为了处理这个错误，可以采取以下几种方法： 1. 使用`router.go()`或`router.back()`替代`router.push`或`router.replace`进行导航，因为前者处理浏览器历史记录，通常不会触发冗余导航警告。 2. 在进行路由跳转之前，可以先检查当前路由是否与目标路由相同，如果相同则不执行跳转操作。 3. 在Vue Router的配置中，可以通过设置`scrollBehavior`为`false`来禁用滚动行为，可能会避免触发这个错误。 4. 在Vue实例或组件中，可以通过捕获路由的`NavigationDuplicated`错误来避免它影响应用的其他部分。示例代码： ```javascript // 在Vue实例或组件中处理路由跳转 this.$router.push('/about').catch(err => { if (err.name !== 'NavigationDuplicated') { console.error(err); // 打印非重复导航错误 } }); ```