解决Vue报错NavigationDuplicated

最新推荐文章于 2024-04-24 14:52:25 发布
最新推荐文章于 2024-04-24 14:52:25 发布
阅读量642 收藏
点赞数 1
分类专栏： 记录 文章标签： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wumingid/article/details/103412014
版权
就是这个错误

在这里插入图片描述
这个错误原因在于Vue-router在3.1之后把$router.push()方法改为了Promise。所以假如没有回调函数，错误信息就会交给全局的路由错误处理，因此就会报上述的错误。

先卸载vue-router，再安装3.0.7版本可以解决。

暂时性 简单粗暴的解决办法

npm uninstall vue-router
npm install vue-router@3.0.7
Code Life
关注
专栏目录
前端开发：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 to current location
王佳斌
11-16 1817
vue2，vue2报错，浏览器控制台报错，vue2网页网站路由报错，vue中出现路由导航出现Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "xxx"，vue重复点击菜单报错怎么办，vue路由报错如何解决，vue怎么解决重复点击路由报错问题，解决Vue路由导航报错:NavigationDuplicated，成功解决，Vue路由导航报错，Vue - 报错Uncaught
Vue-router 报错NavigationDuplicated的解决方法
10-15
主要介绍了Vue-router 报错NavigationDuplicated的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue项目 NavigationDuplicated 错误
cmmboy1990的博客
07-21 185
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
qq_14945847的博客
02-22 242
vue项目报错，NavigationDuplicated
Vue router报错:NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated"}的解决方法
xjh01的博客
01-28 615
在使用Element UI 时点击同一个路由，控制台报错，但不影响使用 解决方法如下： 在引用vue-router的文件中添加一段代码 const originalPush = Router.prototype.push; Router.prototype.push = function push(location) { return originalPush.call(this, ...
vue：NavigationDuplicated错误解决以及原理分析
helloWorldJavaQi的博客
12-17 656
vue：NavigationDuplicated错误解决以及原理分析 路由跳转有两种形式：声明式跳转、编程式跳转 声明式跳转不存在此问题，原因使vue-router底层已经处理好了 编程式跳转会出现此问题的原因是因为vue-router版本^3.5.3引入了promise，有返回值 解决方案:在vue-router中添加如下代码 Vue.use(VueRouter) //先保存router原型对象的push let origin = VueRouter.prototype.push //第一个参数：告诉pu
vue路由切换时NavigationDuplicated报错的解决方法
xm2by的博客
01-16 1539
vue路由切换时NavigationDuplicated报错的解决方法 在vue中使用this.$router.push()方法切换路由时，有时控制台会报NavigationDuplicated相关的错误，如下图所示： 原因： 在网上查询一番后，比较多的一种说法是，vue-router在3.1之后把$router.push()方法改为了Promise，因此在使用$router.push()时如果...
vue router 报错： Uncaught (in promise) NavigationDuplicate{_name: "NavigationDuplicated"}
qq_27470647的博客
04-01 429
解决方案参考博客：https://blog.csdn.net/weixin_45522694/article/details/99548714 报错解决办法：针对路由跳转相同的地址添加catch捕获一下异常：this.$router.push(’/location’).catch(err => { console.log(err) }) 如图： 代码如下： <template>...
vue路由报错误问题（NavigationDuplicated）
一个韩韩韩
11-06 332
在route.js中配置： import Router from 'vue-router' const originalPush = Router.prototype.push Router.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) }
NavigationDuplicated: Avoided redundant navigation to current location: “/fristhome/product“.
~牧马~
08-25 1017
原因：Uncaught (in promise) navigationduplicate:避免冗余导航到当前位置:“/ frishome /product”。解决方法：找到router/index.js 配置下面。简单来说，就是路由重复性的加载导致路由沉余。
Vue-router报NavigationDuplicated的产生原因和解决方案
dachuichaobang的博客
04-15 601
当你的Vue项目在当前的路由下企图再次导航到当前路由时就会出现NavigationDuplicated的问题（通俗来讲就是多次进入了同一个path，比如说当前你在/user/user-list页面，这时候你通过点击按钮或其他的方式又进入了/user/user-list页面，那就会抛出下面的问题） 这个问题是vue-router3.0版本往上才出现的问题，目前的vue-router@3.1.1 版本官方已经修复了此问题。NavigationDuplicated 产生的时候会抛出一个promise,在3.0版
解决vue项目中出现NavigationDulicated，navigating to current location(xxxx) is not allowed的问题
仗剑东游的猫
06-15 969
这个就是路由问题， 在路由中添加的相同的路由，我们只需要重写路由就行了 可以在router文件或者main.js文件里面引入vue-router，添加以下代码即可 import Routers from "vue-router"; const routerPush = Routers.prototype.push Routers.prototype.push = function push(location) { return routerPush.call(this, location).ca
Vue-Router报错 Uncaught (in promise) NavigationDuplicate{_name: "NavigationDuplicated"} 解决
sinuo123_5的博客
12-06 596
最近在学习vue相关的知识，代码无错误，vue-router却一直在控制台报错Uncaught (in promise) NavigationDuplicate{_name: "NavigationDuplicated"} 。 原因是 Vue-Router在升级到3.1.x时，重复点击导航，则会报该错误，不过该错误并不影响功能使用。 我的解决方案是：先卸载已安装的Vue-Route...
Vue路由NavigationDuplicated错误
最新发布
c_studer_的博客
04-24 1855
这个错误信息显示的是错误，也就是说，在 Vue.js 使用 vue-router 时，应用试图导航到一个与当前已经是激活状态的路由相同的新路由上，从而触发了这个错误。在实际应用中，这通常发生在你试图通过vue-router的push或者replace方法重复跳转到相同的路由地址上。
vue router 报错： Uncaught (in promise) NavigationDuplicate{_name: "NavigationDuplicated"} 解决方案
qq_37309764的博客
03-03 592
vue-router ≥3.0版本回调形式以及改成promise api的形式了，返回的是一个promise，如果路由地址跳转相同, 且没有捕获到错误，控制台始终会出现如图所示的警告 （注：3.0以下版本则不会出现以下警告！！！，因路由回调问题…） 方案一：安装vue-router3.0以下版本：先卸载3.0以上版本然后再安装旧版本npm install @vue-router2.8...
Vue-router 报NavigationDuplicated的可能解决方案
dixie2009的博客
09-24 2181
出现这个问题，控制台会报[NavigationDuplicated{_name: "NavigationDuplicated", name: "NavigationDuplicated"}]。其原因在于Vue-router在3.1之后把$router.push()方法改为了Promise。所以假如没有回调函数，错误信息就会交给全局的路由错误处理，因此就会报上述的错误。 如果你仔细观察并...
vue报错 created hook错误如何解决
06-09
解决Vue中"created"钩子错误的方法通常有以下几种： 1. 确认组件中是否定义了"created"钩子函数，如果没有，则需要添加该函数。 2. 如果在"created"钩子函数中访问了未定义的变量或方法，需要确认变量或方法是否...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值