前端开发：Vue项目报错NavigationDuplicated：Avoided redundant navigation to current location：“/XXX”的解决方法

最新推荐文章于 2024-06-11 03:41:50 发布
最新推荐文章于 2024-06-11 03:41:50 发布
阅读量1.3w 收藏 4
点赞数 3
分类专栏： 前端开发--付费 文章标签： vue.js 前端开发
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/CC1991_/article/details/112791714
版权
前端开发--付费 专栏收录该内容
63 篇文章 33 订阅 ¥259.90 ¥99.00
订阅专栏

最近在Vue项目开发的过程中遇到一个问题，那就是在点击同一个路由操作的时候，控制台会报一下错误提示：

Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/Refund".

经过排查之后才发现是关于Vue中路由重复引起的错误，经过查找资料以及搜索相关知识，该报错原因是因为ElementUI导航栏里面的vue-router在3.0以上版本重复点击菜单引起的路由重复报错，得出了以下解决步骤：

打开Vue项目，找到router文件夹下的index.js文件，

了解本专栏 订阅专栏 解锁全文
三掌柜666
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
专栏目录
订阅专栏
Vue-router 报错NavigationDuplicated的解决方法
10-15
主要介绍了Vue-router 报错NavigationDuplicated的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue项目报错：Uncaught SyntaxError: Unexpected token <
10-17
主要介绍了Vue项目报错：Uncaught SyntaxError: Unexpected token <，在引入第三方依赖的 JS 文件时，遇到的一个问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue路由导航报错：NavigationDuplicated: Avoided redundant navigation to current location解决方法
热门推荐
背心的博客
09-28 5万+
Vue路由跳转报错：NavigationDuplicated: Avoided redundant navigation to current location解决方法
VUE路由重复错误
qq_32234855的博客
07-16 860
说明文档: https://github.com/vuejs/vue-router/releases?after=v3.3.1 只是遇到了这种情况，然后搬运教程里面的解决方式 1.产生错误的情况：编程式路由跳转到当前路径且参数没有变化时会抛出 NavigationDuplicated(重复导航) 错误 2.原因分析: vue-router3.1.0之后, 引入了push()的promise的语法, 如果没有通过参数指定回调函数就返回一个promise来指定成功/失败的回调, 且内部会判断如果要跳转的路径和.
重写VueRouter的push/replace方法
最新发布
qq_45537568的博客
06-11 149
重写VueRouter的push/replace方法，省流：复制代码粘贴到router文件中
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location报错
m0_64351096的博客
09-26 1万+
​ 解决 Vue 路由传递参数时，出现 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation 问题. 报错内容：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/search/111". 问题描述：重复点击导航时，控制台报错 ​
成功解决NavigationDuplicated: Avoided redundant navigation to current location:
shazhengjing的博客
10-09 8280
成功解决NavigationDuplicated: Avoided redundant navigation to current location:
NavigationDuplicated: Avoided redundant navigation to current location
web_wp的博客
05-06 2836
NavigationDuplicated: Avoided redundant navigation to current location
毕业设计-前端项目：基于electronic+vue开发的桌面端音乐app
04-24
桌面端音乐app 一个基于 Electron + Vue 开发的音乐...已集成 eslint前端开发规范 已支持的平台：window，mac, linux 开发模式 npm run dev 构建免安装版 npm run pack:dir 构建安装包（Windows版）npm run pack
出现 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation 问题
will5451的博客
05-06 2680
出现 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: “
薇z的博客
07-22 9723
解决报错：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “
vue NavigationDuplicated: Avoided redundant navigation to current location
黄钟飞的博客
12-16 6647
NavigationDuplicated: Avoided redundant navigation to current location:
解决：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location
weixin_71403100的博客
03-25 1894
问题：解决vue路由传递参数时，重复点击会抛出NavigationDuplicated的警告错误。原因：vue-router引入了promise, push的时候会返回一个promise。解决方法一：给push方法直接传成功和失败的回调函数。解决方法二：在路由内重写push或replace方法。
解决Vue报错：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location...
程序员小明1024
12-17 4036
一、重复点击导航时，控制台出现报错 ，虽然不影响功能使用，但也不能坐视不管。 解决方案： 方案一：只需在 router 文件夹下，添加如下代码： import Vue from 'vue' import VueRouter from 'vue-router' import Home from '@/views/Home' import Main from '@/views/Main' imp...
错误 “Avoided redundant navigation to current location...” 的解决方案
FunSober的博客
10-31 1万+
使用编程式导航路由跳转时，需要指定成功和失败的回调函数。
解决Vue报错: Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current locatio
weixin_51696862的博客
09-06 2450
main.js。
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to
weixin_45015751的博客
10-08 630
路由跳转报错
解决Vue报错：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location
qq_40745468的博客
02-07 3368
resolve与reject是用户传的成功/失败的回调。出现这个问题是因为重复点击了相同的路由引起的：编程式导航。问题描述：重复点击导航时，控制台出现报错 ，虽然不影响功能使用，但也不能坐视不管。方案二：在跳转时，判断是否跳转路由和当前路由是否一致，避免重复跳转产生问题。这是因为promise需要传递一个成功/失败的回调，才能处理这个异常。：给push方法传递相应的成功、失败回调函数，可以捕获当前的错误。push：是VueRouter类的一个实例。中，还是会有类似的错误出现。this：当前组件的实例。
vue中这个报错怎么解决NavigationDuplicated: Avoided redundant navigation to current location: "/SearchRecord".
09-20
这个错误提示表示在vue中进行了冗余的导航操作，即跳转到了当前位置。解决这个问题的方法是使用`catch`方法来捕获错误并处理。 你可以在路由跳转的代码中加入`catch`方法，如下所示： ```javascript this.$router.push({ path: '/SearchRecord' }).catch(err => {}) ``` 这样就可以避免出现冗余导航的错误提示。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

三掌柜666

如果对您有所帮助，请支持一下呗

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

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

打赏作者

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

抵扣说明：

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

余额充值