vue 控制台错误 NavigationDuplicated

最新推荐文章于 2024-12-17 10:13:50 发布
原创 最新推荐文章于 2024-12-17 10:13:50 发布 · 414 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文解析了Vue-router在3.1版本后因$router.push方法变更导致的页面切换错误，并提供了解决方案，通过为每个router.push增加回调函数来避免全局路由错误处理中的异常。

新下了个vue admin 做了两个菜单，页面切换的时候总报错，上网查了一下原来是 Vue-router在3.1之后把$router.push()方法改为了Promise的，如果没有回调函数，错误信息就会交给全局的路由错误处理，因此就会报上述的错误。

解决方法参考https://www.cnblogs.com/rever/p/11577322.html

我选择方案2，为每个router.push增加回调函数

如下，找到所有的 router.push

更新为 router.push('/location').catch(err => {err})

[Vue warn]: Error in v-on handler (Promise/async): “NavigationDuplicated: Navigating to current loca
?sonder* 的博客
08-08 1958
场景   运用编程式路由导航，处在当前路由状态下，进行二次跳转（一直点击同一个按钮）时会报错 [Vue warn]: Error in v-on handler (Promise/async): "NavigationDuplicated: Navigating to current loca 解决办法 使用onComplete()、onAbort() this.$router.push({ path: ‘/XXX’ },onComplete => {},onAbort => {})  
vue控制台报错
m0_57087617的博客
03-26 1778
vue项目中控制台报错：Cannot read property '_withTask' of undefined 例： 想偷懒少写点代码，便从一个页面复制代码到另一个页面，但不是全部复制，导致一部分方法在template使用了，但是在methods中并没有定义（如果要复制就一定要复制完啊，找了好久都没有找到原因.....） 情况如下： <div class="canvas-area" @mousedown="mouseDown" @mousemove="mouseM
Vue出现错误NavigationDuplicated
科技向善
01-06 582
初步解决方案： 如果路由跳转出现NavigationDuplicated异常的话，是因为vue-router版本在3.1以上，换成3.0版本的就没这个问题了。
Vue-router报NavigationDuplicated的产生原因和解决方案
dachuichaobang的博客
04-15 750
当你的Vue项目在当前的路由下企图再次导航到当前路由时就会出现NavigationDuplicated的问题（通俗来讲就是多次进入了同一个path，比如说当前你在/user/user-list页面，这时候你通过点击按钮或其他的方式又进入了/user/user-list页面，那就会抛出下面的问题） 这个问题是vue-router3.0版本往上才出现的问题，目前的vue-router@3.1.1 版本官方已经修复了此问题。NavigationDuplicated 产生的时候会抛出一个promise,在3.0版
Vue路由NavigationDuplicated错误
c_studer_的博客
04-24 2156
这个错误信息显示的是错误，也就是说，在 Vue.js 使用 vue-router 时，应用试图导航到一个与当前已经是激活状态的路由相同的新路由上，从而触发了这个错误。在实际应用中，这通常发生在你试图通过vue-router的push或者replace方法重复跳转到相同的路由地址上。
NavigationDuplicated: Avoided redundant navigation to current location: “/xxx“.
weixin_46351593的博客
02-08 274
错误： NavigationDuplicated: Avoided redundant navigation to current location: “/xxx”. 原因： 避免到当前位置的冗余导航，是指路由重复。 虽然对项目没有太大影响，但是看到红字十分影响心情。 解决方法： 在router文件夹下的index.js文件中添加如下代码： // 获取原型对象中的push方法 const originalPush = VueRouter.prototype.push // 修改原型对象中的push方法
NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated"}问题
The One Who's at the Front
05-12 1171
Uncaught (in promise)NavigationDuplicated{_name:“NavigationDuplicated”} 最近在vue项目中遇到个问题——点击侧边栏路由跳转时在控制台报错，如下图所示： vue-router 3以上版本回调形式改成promise api的形式了，返回的是一个promise，3.0以下版本则不会出现上面的警告⚠️。 解决方案如下： 方案1 在main.js中加入如下代码: import Router from 'vue-router' const r
[Vue warn]: Error in v-on handler (Promise/async): "NavigationDuplicated: Navigating to current loca
I_xuebi的博客
04-28 7735
场景：路由运用編程式导航，一直点击同一个按钮 问题：[Vue warn]: Error in v-on handler (Promise/async): “NavigationDuplicated: Navigating to current location (”/commonSetting/accountMgr") is not allowed" 红框为现在所处的路由地址。 解决前语句：th...
重复点击同一个菜单路由 报错NavigationDuplicated
Beam
12-06 1095
现象 连续点击同一个路由，第二次点击时报错NavigationDuplicated。 如图所示： 对比 另一个系统没有出现这个问题，对比两个系统使用的element-ui的版本果然不同。 解决 于是查看当前系统的package-lock.json中所使用的element-ui版本为2.8.2 "element-ui": { "version": "2.8.2", "resolved": ...
NavigationDuplicated: Avoided redundant navigation to current location 解决重复路由错误
qq_42288851的博客
03-04 1750
原因：是指路由重复。 虽然对项目无影响，但是看到有红的不舒服！ 解决方法： 打开router文件夹下的index.js文件中添加如下代码： //获取原型对象上的push函数 const originalPush = Router.prototype.push //修改原型对象中的push方法 Router.prototype.push = function push(location) { return originalPush.call(this, locati...
vue 跳转报 NavigationDuplicated: Avoided redundant navigation to current location: “/to-do“.
小破孩的博客
04-06 438
vue 跳转报 NavigationDuplicated: Avoided redundant navigation to current location: "/to-do".
NavigationDuplicated error
xif3681的博客
12-05 605
vue 路由重复点击报错： NavigationDuplicated error 解决： import Router from 'vue-router' const originalPush = Router.prototype.push Router.prototype.push = function push (location, onResolve, onReject) { r...
vue报错 ：NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated"}
a5252145的博客
10-16 613
vue报错 ：NavigationDuplicated {_name: “NavigationDuplicated”, name: “NavigationDuplicated”} main.js中添加： // 处理element NavigationDuplicated 错误 import Router from 'vue-router' const originalPush = Router...
vue中捕获错误
最新发布
m0_71492140的博客
12-17 427
在 Vue 组件中捕获错误可以通过几种方式实现。
Vue中通过重写push和replace方法来解决路由跳转时出现NavigationDuplicated问题
m0_56597903的博客
10-24 414
NavigationDuplicated错误通常发生在用户在短时间内多次点击相同的路由连接时，原因是因为Vue-Router的push方法会将新的路由添加到历史记录中，并导航到该路由。当多次快速点击相同的路由链接时，会导致多次调用push方法，从而在浏览器历史记录中添加了多个相同的路由。为了解决这个问题，可以对push和replace方法进行重写。通过重写push和replace方法，可以在路由跳转之前检查当前路由是否与目标路由相同，相同则不进行跳转，从而避免了重复导航。
vue报错 NavigationDuplicated: Avoided redundant navigation to current location:
yasuo56的博客
10-26 1891
vue报错 NavigationDuplicated: Avoided redundant navigation to current location:
NavigationDuplicated 产生原因和解决方法
qq_34295211的博客
10-08 9383
当你的Vue项目在当前的路由下企图再次导航到当前路由时就会出现NavigationDuplicated的问题（通俗来讲就是多次进入了同一个path，比如说当前你在/user/user-list页面，这时候你通过点击按钮或其他的方式又进入了/user/user-list页面，那就会抛出下面的问题） 这个问题是vue-router3.0版本往上才出现的问题，目前的vue-ro...
Vue项目中控制台报错：NavigationDuplicated: Avoided redundant navigation to current location......解决办法
DangR_Jisoo的博客
03-07 1244
Vue项目中控制台报错：NavigationDuplicated: Avoided redundant navigation to current location…解决办法 出现问题的原因 控制台报错是因为冗余导航，也就是你在同一个导航上连续重复点击多次造成的，虽然无大碍，但控制台报错还是会令人难受 解决办法 办法一：在终端上安装npm i vue-router@3.0 -S 如果显示上述图片表明安装成功，之后再次运行程序npm run dev，重复点击就不会报错啦 办法二：在你创建的项目的route
Vue Router的NavigationDuplicated错误
zoujiawei6的博客
11-17 368
NavigationDuplicated: Avoided redundant navigation to current location: “/”. Error: Redirected when going from “" to "” via a navigation guard. Vue router最近将NavigationDuplicated的错误置顶了，posva的高赞回答提出的解决方案如下： import Router from 'vue-router' const originalPu.
编程式路由导航连续跳转出现NavigationDuplicated报错的问题
weixin_46389390的博客
04-16 1216
1.错误示例 如在多次点击搜索按钮进行编程式路由跳转时控制台会出现报错NavigationDuplicated 2.分析错误产生原因 原因是在vue-router3.1.0之后, 引入了promise的语法。如果路由跳转时里面的参数没有改变，会返回一个失败的promise，如果不去处理这个失败的promise，就会抛出这个错误。而声明式路由导航不会出现这种错误，因为Vue在底层已经处理好了。 3.解决办法 方法一 我们可以在使用push和replace进行跳转时，手动的传入成功与失败的回调。 this.
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值