Vue-elementUI - 项目中报错Error: Avoided redundant navigation to current location: “/xxx“.的解决方案

最新推荐文章于 2022-10-31 22:03:27 发布
最新推荐文章于 2022-10-31 22:03:27 发布
阅读量3.2k 收藏 3
点赞数 7
CC 4.0 BY-SA版权
分类专栏： vue.js element-ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SoULikeMe/article/details/107469470

报错显示路由重复，对功能没有影响,可是强迫症看着不爽。

具体表现： 重复点击 elementui 中 tab 栏菜单，会报这种错误。

解决方案：

// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
   
   
  return originalPush.
最低0.47元/天 解锁文章
前端开发：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 2426
vue2，vue2报错，浏览器控制台报错，vue2网页网站路由报错，vue中出现路由导航出现Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "xxx"，vue重复点击菜单报错怎么办，vue路由报错如何解决，vue怎么解决重复点击路由报错问题，解决Vue路由导航报错:NavigationDuplicated，成功解决，Vue路由导航报错，Vue - 报错Uncaught
Avoided redundant navigation to current location: “/“
qq1143417367的博客
05-19 730
这里写自定义目录标题vue使用element ui 的导航栏的时候会出现报错：Avoided redundant navigation to current location: "/"的解决方法解决方法功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程
解决vue中使用ElementUI导航栏重复点菜单出现错误Error: Avoided redundant navigation to current location:的问题
Var-al 的博客
07-23 607
在VUE中使用ElementUI中的导航的时候，默认情况下如果重复点击某选项，会报错，显示是路由重复， 虽然说对项目没啥影响，但是看到有红色的bug就想解决有木有。 解决方法如下 在router.js中加上以下代码 // 解决ElementUI导航栏中重复点菜单报错问题 const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return origina
Vue报错Error: Avoided redundant navigation to current location的解决办法
weixin_46743083的博客
08-04 1万+
Vue报错： Error in v-on handler (Promise/async): " Error: Avoided redundant navigation to current location: “/userinfo”." 原因： 当前页面已经在要跳转的路由中。简单来说就是不能跳转路由到自身。 专业术语称为：避免到当前位置的冗余导航 解决办法： goUserinfo(){ this.$router.push( {path: '/userin
vue报错：Avoided redundant navigation to current location: “/“的解决方法
m0_57426442的博客
08-23 3744
Avoided redundant navigation to current location: "/"。
Error: Avoided redundant navigation to current location ElementUI导航栏重复点击报错
weixin_44246487的博客
06-17 501
Error: Avoided redundant navigation to current location: ElementUI导航栏重复点菜单报错的解决办法： 报错如下： 解决方法： 打开文件中的路由文件，(router/index.js) import Vue from "vue"; import VueRouter from "vue-router"; Vue.use(VueRouter); // 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题 const
VUE3.0项目Avoided redundant navigation to current location: “/XXX“解决方案
Hiroshi's
02-13 554
在VUE中路由遇到Error: Avoided redundant navigation to current location:报错显示是路由重复 解决方案：router文件夹下面的index.js中加上下面几句代码： // 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题 const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) .
NavigationDuplicated: Avoided redundant navigation to current location: 解决办法
猿小白的博客
02-19 3435
在使用vue的过程中，重复点击菜单会报以下错误： NavigationDuplicated: Avoided redundant navigation to current location: 解决办法： 在控制台中运行以下命令，安装成功，重新启动即可解决该问题。 npm i vue-router@3.0 -S ...
vue路由跳转报错Avoided redundant navigation to current location: “/xxxxxx“.
qq_43958325的博客
04-23 7439
vue路由跳转报错Avoided redundant navigation to current location: “/xxxxxx“.一、问题出现及其出现原因二、问题解决三、原理分析四、this指向复习 一、问题出现及其出现原因 在使用this.$router.push进行路由的跳转时，出现如下报错： 问题出现原因：重复路由跳转，比如说当前路由是商品详情页面/goodsDetail，但是点击按钮进行this.$router.push操作，要跳转的还是商品详情页面/goodsDetail。 二、问题
vue版本冲突 解决 替换包
04-15
运行vue项目时，启动报错 error in ./~/_element-ui@2.7.2@element-ui/packages/form/src/label-wrap.vue Syntax Erroe:Unexpected token (20:14) ;； 将此压缩包解压到node_moudel里面找到 element-ui，替换即可
vue NavigationDuplicated: Avoided redundant navigation to current location
黄钟飞的博客
12-16 6765
NavigationDuplicated: Avoided redundant navigation to current location:
错误 “Avoided redundant navigation to current location...” 的解决方案
FunSober的博客
10-31 1万+
使用编程式导航路由跳转时，需要指定成功和失败的回调函数。
Vue路由导航报错：NavigationDuplicated: Avoided redundant navigation to current location解决方法
热门推荐
背心的博客
09-28 5万+
Vue路由跳转报错：NavigationDuplicated: Avoided redundant navigation to current location解决方法
ElementUI使用导航菜单重复点击报错解决方法
小超人日常码字
07-01 2247
element导航菜单标签使用 <el-menu router :default-active="$route.path" class="el-menu-vertical-demo"> <el-menu-item index="/home"> <span slot="title" class=""> Home </span> </el-menu-
VUE项目 Error: Avoided redundant navigation to current location: “/“.
mdd996735325的博客
08-26 267
在VUE中路由遇到Error: Avoided redundant navigation to current location: 报错显示路由频繁点击导致路由重复而报错，该报错对路由跳转功能没有任何影响。 解决方法如下： router 文件夹下 index.js 中添加下面代码即可 import VueRouter from 'vue-router' // 解决导航栏或者底部导航tabBar中的vue-router在3.0版本以上频繁点击菜单报错的问题。 const originalPush = Vue
vue中出现路由导航出现 Avoided redundant navigation to current location:“/“问题的解决方法。
m0_65262198的博客
03-26 1万+
当我们在使用编程式路由实现跳转的时候，多次执行会抛出NavigationDuplicated的警告错误是因为"vue-router"3版本之后 底层引入了promise。而我们通过声明式导航没有出现此类问题是因为vue-router底层已经处理好了。 出现问题如下： 解决方法1. 在我们使用编程式导航时，通过给push或replace方法传递相应的成功和失败的回调函数可以捕获到当前的错误解决此问题 如： //编程式导航 this.$router.push({ name:'s
Vue - 项目中报错Error: Avoided redundant navigation to current location: “/xxx“.的解决方案
weixin_44704285的博客
07-30 1万+
项目中报错 Error: Avoided redundant navigation to current location: “/xxx”. 的解决方案 报错显示路由重复，对功能没有影响。 解决方法： router 文件下 index.js 中添加下面代码即可 // 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题 const originalPush = Router.prototype.push Router.prototype.push = function p
解决VueRoter/element-ui路由报错Error: Avoided redundant navigation to current location的问题
qq_36229632的博客
06-18 1307
在router>index.js文件中增加以下代码： const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) }
ERROR Avoided redundant navigation to current location: "/HomeView". NavigationDuplicated: Avoided redundant navigation to current location: "/HomeView". at createRouterError (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2056:1
最新发布
03-14
### Vue Router 中避免重复导航到当前位置的解决方案 在 Vue.js 开发过程中，`NavigationDuplicated` 警告通常发生在尝试通过 `this.$router.push()` 方法跳转至当前已激活的路由时。这种行为虽然不会阻止程序正常运行，但在控制台中会抛出红色警告信息，影响开发体验。 以下是几种常见的解决方法： #### 1. 使用条件语句防止重复导航 可以通过比较目标路径与当前路径来决定是否执行跳转逻辑。如果两者一致，则不触发导航操作。 ```javascript if (this.$route.path !== '/home') { this.$router.push('/home'); } ``` 这种方法简单有效，适用于大多数场景[^4]。 #### 2. 捕获并忽略 `NavigationDuplicated` 错误 Vue Router 提供了一个基于 Promise 的 API 来处理导航动作的结果。可以利用 `.catch()` 方法捕获错误，并显式忽略特定类型的异常。 ```javascript this.$router.push({ path: '/home' }).catch(err => { if (err.name !== 'NavigationDuplicated') throw err; // 只忽略 NavigationDuplicated 类型的错误 }); ``` 此方式能够优雅地屏蔽冗余导航引发的警告，同时保留其他潜在问题的通知功能[^2]。 #### 3. 更新 Vue Router 至最新版本 自 Vue Router v3.1.0 起引入了新的选项 `replace: true` 或者直接调用 `$router.replace()` 替代传统意义上的 push() 。它允许开发者更灵活地定义如何更新历史记录栈条目而不触发额外校验机制。 例如： ```javascript // Option A - Replace instead of Push this.$router.replace('/home'); // Option B - Use replace option inside route object definition { name: 'Home', path: '/', component: Home, beforeEnter(to, from, next){ if(from.fullPath === '/') return; next(); } } ``` 值得注意的是，当采用替换模式时需注意可能带来的副作用比如丢失前进后退按钮的功能支持等问题[^5]。 综上所述，推荐优先考虑第一种方案即增加判断逻辑减少不必要的切换次数；其次再结合实际情况选用第二种或者第三种策略进一步优化用户体验效果最佳[^1]。 ### 注意事项 - 如果项目依赖于旧版 Vue Router (<v3.1)，则无法享受上述某些特性优势，请及时升级框架组件库以获得更好的兼容性和性能表现。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值