Vue-router 报NavigationDuplicated解决方案

最新推荐文章于 2024-08-28 08:32:48 发布
原创 最新推荐文章于 2024-08-28 08:32:48 发布 · 996 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js

本文解决Vue-router 3.1版本更新后，$router.push()方法因改为Promise而引发的uncaught(in promise)错误。通过添加回调函数，有效避免全局错误处理时的直接报错。

控制台报错信息
原因：Vue-router在3.1之后把$router.push()方法改为了Promise, 所以当你使用router.push的时候，按照旧写法没有写回调函数，则会抛出一个uncaught (in promise)的错误，交由全局错误处理则会直接打印报错，解决方法是在调用router.push的时候增加回调函数，如：

router.push('/location').catch(err => {err})
vue-router 采坑记录
Q1761991696的专栏
10-12 2676
一、错误：Uncaught Error: [vue-router] route config "component" for path: /detail cannot be a string id. Use an actual component instead. 解决方案：路由配置中 import Detail from './components/detail.vue'; const routers = [ ...... { path:'/detail', ...
关于产生冗余导航，vue-router报错的问题
weixin_43786395的博客
02-16 1182
项目场景： 写编程式路由导航时，vue-router报错。 问题描述： Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/home/message/detail?id=003&title=%E6%B6%88%E6%81%AF003". at createRouterError (webpack-internal:///./node_modules/
Vue-router 报NavigationDuplicated的可能解决方案
Mm_Dxx的博客
04-16 379
今天在做tabbar的时候，遇到一个问题，页面虽然能够成功跳转，但是控制台报了一个Uncaught (in promise)的错误，多次点击时报错[NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated"}]。查了资料，发现原因是在于Vue-router在3.1之后把$router.push(...
vue项目 NavigationDuplicated 错误
cmmboy1990的博客
07-21 238
NavigationDuplicated: Avoided redundant navigation to current location… 1.原因：element-ui多次点击导航（多次push同一个路由），会报错 2.解决：在router index,js 中加入代码： const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return origina
vue 路由 NavigationDupLicated 解决
weixin_45802907的博客
12-08 1116
vue 路由 NavigationDupLicated 解决 编程式路由跳转到当前路由(参数不变)，多次执行会抛出 NavigationDupLicated 的警告错误。怎么解决 为什么编程式导航进行路由跳转的时候，就会有这种警告错误呢 因为 vue-router:3.5.3 版本引入了 promise，假如没有回调函数，错误信息就会交给全局的路由错误处理，因此就会报上述的错误。 解决方法 方法一 运用编程式路由的时候加上成功，失败的回调 this.$router.push( { name: "
vue-router.js:2071 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to curre
年少不知曲中意,再听已是曲终人
04-30 453
vue-router.js:2071 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/register".
Avoided redundant navigation to current location: "/personal". NavigationDuplicated: Avoided redundant navigation to current location: "/personal". at createRouterError (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2056:15) at createNavigationDuplicatedError (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2026:15) at HashHistory.confirmTransition (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2343:18) at HashHistory.transitionTo (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2270:8) at HashHistory.push (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2725:10) at eval (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:3046:24) at new Promise (<anonymous>) at VueRouter.push (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:3045:12) at VueComponent.close (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/login/Email.vue?vue&type=script&lang=js:101:20) at invokeWithErrorHandling (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:3083:30)
最新发布
09-13
根据引用内容，解决这个问题的常见方法是重写VueRouter原型上的push方法，以捕获并忽略NavigationDuplicated错误。 具体步骤： 1. 在定义路由的文件（通常是router/index.js）中，获取原始的push方法。 2. 重写...
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/systemOps/systemManage/updateInfo?userId=liujinxu". at createRouterError (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2009:15) at createNavigationDuplicatedError (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1979:15) at HTML5History.confirmTransition (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2272:18) at HTML5History.transitionTo (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2204:8) at HTML5History.push (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2545:10) at eval (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2964:22) at new Promise (<anonymous>) at VueRouter.push (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2963:12) at VueComponent.handleNodeClick (webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/systemOps/systemManage/userManage/userManage.vue?vue&type=script&lang=js:141:57)
06-08
以下是几种解决方案：1.**修改VueRouter原型方法**（最常见解决方案）：在router配置文件中（通常是router/index.js），重写push方法以捕获异常：```javascriptimportVueRouterfrom'vue-router'//保存原始的push方法...
Vue-router 报错NavigationDuplicated的解决方法
11-21
版本：3.1.x 报错原因： 使用push()、replace()进行导航时，不能重复导航到当前路由。 解决办法： 方法1：在定义路由的文件中router/index.js const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push (location) { return originalPush.call(this, location).catch(err => err) } const originalReplace = VueRouter.prototype.rep
Vue-router报NavigationDuplicated错误的解决方法
qq_42551543的博客
12-21 406
Vue-router报NavigationDuplicated错误的解决方法
vue-router报NavigationDuped错误，以及重写$router.push与$router.replace方法
QZ9420的博客
12-06 955
问题： 编程式路由跳转到当前路由（参数不变），多次执行会抛出NavigationDuped的警告错误 ===>>>路由跳转有两种形式：声明式导航、编程式导航 ===>>>声明式导航是没有这种问题的，因为vue-router底层已经处理好了 问题的产生原因 “vue-router”: “^3.5.3”：最新的vue-router引入了promise 解决方案 1、通过给push或者replace方法传递相应的成功、失败的回调函数，可以捕捉到当前错误，即可解决 this.$r
vue-router 跳转异常 Error: Navigation cancelled from “/“ to “/home“ with a new navigation.
热门推荐
csdn_aspnet的专栏，请点击博客主页右上角三个点中的私信联系
08-28 9万+
2、vue-router@3.0版本及以上回调形式已经改成promise api的形式了，返回的是一个promise，如果路由地址跳转相同, 且没有捕获到错误，控制台始终会出现如图所示的警告 （注：3.0以下版本则不会出现以下警告！在main.js下注册一个全局函数即可 （注：此处理方案只针对于vue-router 3.0以上版本哈！注：官方vue-router@3.0及以上新版本路由默认回调返回的都是promise，原先就版本的路由回调将废弃！安装 npm install vue-router@2。
解决 vue-router 报错：Navigation cancelled from “/...“ to “/...“ with a new navigation
明天也要努力的博客
12-11 2万+
问题： 项目中需要对用户是否登录进行判断，如果用户未登录或者 token 过期就需要跳转登录页面，进行登录验证。所以需要做一个拦截，在跳转登录页面时报了一个错。 报错如下图所示： 原因： 这个错误是 vue-router 内部错误，没有进行 catch 处理，导致的编程式导航跳转问题，向同一地址跳转时会报错的情况（push 和replace 都会导致这个情况的发生）。 解决： 方案一： 安装 vue-router 3.0 以下版本，先卸载 3.0 以上版本然后再安装旧版本 。 npm install vu
Vue-router 报NavigationDuplicated的可能解决方案，工作感悟
2401_84139908的博客
04-11 1093
前端字节跳动真题解析一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！场吐槽、大厂内推、面试辅导），让我们一起学习成长！**[外链图片转存中…(img-8qVRKEpf-1712773636251)]
vue-router 报错：Navigation cancelled from“/...“ to “/...“ with a new navigation.
weixin_47084275的博客
08-24 3万+
vue-router@3.0版本及以上回调形式已经改成promise api的形式了，返回的是一个promise，如果路由地址跳转相同, 且没有捕获到错误，控制台始终会出现如图所示的警告 （注：3.0以下版本则不会出现以下警告！！！，因路由回调问题…） * 怎么解决呢? 方案一： 安装vue-router3.0以下版本：先卸载3.0以上版本然后再安装旧版本 npm install vue-router@2.8.0 -S 方案二： 针对于路由跳转相同的地址添加catch捕获一下异常：this.$router.
解决 vue-router 报 NavigationDuplicated 错误
wang_xiao_ye的博客
11-29 6352
解决 vue-router 报 NavigationDuplicated 错误 控制台报错： 原因： vue-router 在3.1版本以后将 $router.push()、 $router.replace() 方法改为了 Promise，假如没有回调函数，错误信息就会交给全局的路由错误处理。如截图：Uncaught (in promise) 方案1： 降版 npm i vue-router@3...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值