vue使用router过程中报错Uncaught (in promise) NavigationDuplicated: Avoided redundant navigat

于 2020-08-12 21:11:28 发布 5531 收藏
分类专栏： vue入门
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ywy7777777/article/details/107966803
版权

原因:按钮重复点击如：
在这里插入图片描述
userClick编写的路由地址：
在这里插入图片描述
此时报错：注意：直接link to方式和只点击一次按钮不会报错，第二次再点击按钮则会报错
在这里插入图片描述

微尘&String
关注
  • 0
    点赞
  • 踩
  • 0
    收藏 更改收藏夹
  • 打赏
    打赏
  • 3
    评论
专栏目录
vue-router Uncaught (in promise) 报错问题
qq_41870566的博客
04-24 1771
在vue项目中，每次登录都会出现一个Uncaught (in promise)错误，前边看着没啥大问题也是在项目初期搭建项目，就没管它，现在项目框架搭建好了，对这个bug已经忍到极限，可以动手怼它了。今天看到一篇文章上边写到这个bug是在vue-router版本3.1.0及以上之后才会出现的. 这是因为在vue-router更新到3.1.0版本之后，push和replace会返回一个p...
Vue-Router报错：Uncaught (in promise)Error: Navigation cancelled from “/“ to “/1“ with a new navigation
weixin_45092437的博客
07-25 1367
该错误是因为vue-router的内部没有对编程式导航进行catch处理，所以在使用`this.$router.push()` 和 `this.$router.replace` 进行路由跳转时，往同一地址跳转时或者在跳转的 mounted/activated 等函数中再次向其他地址跳转时会出现报错。但是在3.1.0版本及更高版本中，页面在跳转路由控制台会报Uncaught (in promise)的问题，push和replace方法会返回一个promise, 你可能在控制台看到未捕获的异常。......
解决Vue报错：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location
最新发布
qq_40745468的博客
02-07 982
resolve与reject是用户传的成功/失败的回调。出现这个问题是因为重复点击了相同的路由引起的：编程式导航。问题描述：重复点击导航时，控制台出现报错 ，虽然不影响功能使用，但也不能坐视不管。方案二：在跳转时，判断是否跳转路由和当前路由是否一致，避免重复跳转产生问题。这是因为promise需要传递一个成功/失败的回调，才能处理这个异常。：给push方法传递相应的成功、失败回调函数，可以捕获当前的错误。push：是VueRouter类的一个实例。中，还是会有类似的错误出现。this：当前组件的实例。
解决 vue-router 升级导致的 Uncaught (in promise) NavigationDuplicated
高大哥
06-24 1642
编程式导航连续点击进行路由跳转的时候，就会在控制台抛出 Uncaught (in promise) NavigationDuplicated 错误信息，这是因为 vue-router 版本升级到了 v3.1.0 之后，push 和 replace 方法会返回一个 promise，如果没有对错误进行捕获，那么控制台就会输出未捕获异常。...
vue-router控制台异常：Uncaught (in promise) Error: Redirected when going from “/“ to “/foo“
呆呆papa的博客
10-18 2551
Uncaught (in promise) Error: Redirected when going from "/" to "/foo" via a navigation guard. at createRouterError (vue-router.js:2052:17) at createNavigationRedirectedError (vue-router.js:2011:12) at vue-router.js:2382:19 at test.html:69:1
vue-router报错: Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current lo
Tsailing666的博客
11-01 237
vue.router 编程式实现页面跳转报错
Vue-Router的push和replace方法[Uncaught (in promise) Error]解决方案
bidepanm的博客
06-18 443
解决报错Uncaught (in promise) Error: Redirected when going from … 对Router原型链上的push、replace方法进行重写，这样就不用每次调用方法都要加上catch。 // 解决Vue-Router升级导致的Uncaught(in promise) navigation guard问题 在src/router/index.js中添加： import Router from 'vue-router'; const originalPush
Vue Router 使用router.beforEach出现无限重定向问题解决Detected an infinite redirection in a navigation guard when
努力小张 https://nice_995.gitee.io/blog || https://skye-iiii.github.io/Blog/
02-17 1万+
Detected an infinite redirection in a navigation guard when going from "/" to "/". Aborting to avoid
Vue-Router 路由重复点击时报错 Uncaught (in promise) NavigationDuplicated:Avoided redundant navigation to curr
sumimg的博客
04-12 1280
前言 总结一下，在项目中遇到的一个小问题，使用 Vue 构件的项目里，有时候会存在 重复点击路由 报错的问题，Uncaught (in promise) NavigationDuplicated:Avoided redundant navigation to current location 虽然这个报错并不影响程序的正常运行，但是依然让人感到很不爽，这段代码也差不多是我在构建项目时用的挺多的一段代码。 而且，应该也有很多萌新遇到过这个问题，但是不知道如何解决，所以在这边记录一下。 造成这个报错的原因，大
vue-router报错Uncaught (in promise)及解决方法
qq_38472535的博客
04-05 2610
vue-router报错Uncaught (in promise)及解决方法
vue中Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation报错的解决
jiangjunyuan168的博客
11-23 4712
问题： 当重复点击相同导航时，控制台显示的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
vue-router.esm.js?3423:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navig错误解析
shangjinx的博客
11-17 490
因为编程式this.$router.push或者this.$router.replace的返回值是一个Promise对象，所以需要处理异常，需要有成功回调和失败回调。在目录router的index.js中重写push和replace方法。写vue时，当使用编程式导航多次点击跳转时会出现。
vue-router.esm.js:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to
hua_ban_yu的博客
08-18 6009
在开发vue项目使用路由跳转当前页面发现控制台报错 vue-router.esm.js:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/instDetail?instId=3" 错误。 错误原因：使用this.$router.push跳转页面时，对应的query参数和当前地址栏上的参数一样导致 解决方案： 判断地址栏上的in...
vue-router.esm.js8c4f2065 Uncaught (in promise) NavigationDuplicated Avoided redundant navigation
web18484626332的博客
03-02 1475
今天在写退出登录页面的时候遇到了这个问题，因为退出登录按钮本身在Home页面上，即路由地址为’ / ’ 的页面，退出登录后重定向到的页面依然是Home页面，也就是所谓的产生了冗余导航，vue-router便报错了。 解决办法： 将如下代码加入到路由设置文件index.js中即可 const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return origin.
解决Vue报错：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location...
china_coding的博客
12-17 620
一、重复点击导航时，控制台出现报错 ，虽然不影响功能使用，但也不能坐视不管。 解决方案： 方案一：只需在 router 文件夹下，添加如下代码： import Vue from 'vue' import VueRouter from 'vue-router' import Home from '@/views/Home' import Main from '@/views/Main' imp...
解决Vue报错Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location
xx19960125的博客
06-03 964
有效解决重复点击相同路由
解决 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-router.esm.js?a12b:2046 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation
object not found的博客
11-17 1285
路由重复点击报错解决方法
Uncaught (in promise) NavigationDuplicated {_name: "NavigationDuplicated"}的解决方法
RistonTea的博客
08-22 7197
问题：最近在项目中，做左侧菜单栏时，发现点击路由跳转相同地址 会有这个报错 Uncaught (in promise) NavigationDuplicated{_name: "NavigationDuplicated", name: "NavigationDuplicated"} 解决办法： router.js(或者router文件夹下index.js)中，添加这段代码 impor...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

微尘&String

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值