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

最新推荐文章于 2024-04-19 09:10:46 发布
原创 最新推荐文章于 2024-04-19 09:10:46 发布 · 1.9k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #vue.js

当在Vue应用中使用Vue Router进行页面跳转时，可能会遇到NavigationDuplicated错误。该错误表明尝试进行到已当前所在的位置。通过覆盖VueRouter.prototype.push方法并捕获错误，可以避免这个问题。只需添加一段代码，就能确保即使重复导航也不会抛出错误。

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

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 2528
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以上版本重复点击菜单引起的路由重复报
vue中Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation报错的解决
jiangjunyuan168的博客
11-23 5367
问题： 当重复点击相同导航时，控制台显示的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
qq_45796592的博客
04-19 3835
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 1241
错误原因：避免重复导航到当前路径 <template> <div> <input type="text" placeholder="搜索" @keyup.enter="goSky" /> <router-view /> </div> </template> <script> export default { methods: { goSky() { // 第一次跳转成功，.
vue2里面的Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location
weixin_47652940的博客
11-26 816
注意，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 578
前端vue报错Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current
解决Vue报错：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location...
程序员小明1024
12-17 8148
一、重复点击导航时，控制台出现报错 ，虽然不影响功能使用，但也不能坐视不管。 解决方案： 方案一：只需在 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 2452
问题：解决vue路由传递参数时，重复点击会抛出NavigationDuplicated的警告错误。原因：vue-router引入了promise, push的时候会返回一个promise。解决方法一：给push方法直接传成功和失败的回调函数。解决方法二：在路由内重写push或replace方法。
出现 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation 问题
will5451的博客
05-06 3366
出现 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation 问题 主要原因是Vue 重复点击相同路由造成的： 解决方案： 第一种：在 router 文件夹下里面的文件index.js里面找到如下位置： // src/router/index.js Vue.use(Router) const router =new Router({ ...
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “/..“
weixin_43665351的博客
11-18 300
当路由重复点击时，出现报错 解决方案： 在路由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 434
vue报错 vue使用路由时报如下错误： 报错原因 这个报错是在路由中重复点击路径 ，造成路由路径重复，从而引起异常，还有一种可能是安装的vue-router版本不是最新的或是错误版本引起异常。 解决方案 重新安装vue-router即可。安装命令如下： 【命令】： npm i vue-router@3.0 -S 【温馨提示】在项目目录中执行命令。 结束语 本章主要解决了vue-router 报异常的相关问题，若有疑问或不足，欢迎留言一起讨论。 ...
VUE路由重复错误
qq_32234855的博客
07-16 1005
说明文档: 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 2735
main.js。
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to
weixin_45015751的博客
10-08 734
路由跳转报错
uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current loaction ‘xxxxxx
Yuan_Xiao_Tian_的博客
10-27 730
解决方法：在路由内重写push或replace方法。本文仅记录自己遇到的问题。
chunk-vendors.js:241816 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location:
最新发布
11-02
`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、付费专栏及课程。

余额充值