vue.js框架 Error: Avoided redundant navigation to current location

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

#vue #前端

本文详细介绍了在使用ElementUI与vue-router 3.0以上版本时，遇到的重复点击菜单导致的报错问题及解决方案。通过在router/index.js中添加特定代码，可以有效避免此错误，确保应用程序的稳定运行。

1、ErrorCode：
在这里插入图片描述

2、原因：
ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题

3、解决办法(router --》index.js添加以下代码 )：
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
return originalPush.call(this, location).catch(err => err)
}

vue路由报错Avoided redundant navigation
Only No.1
08-18 2843
今天在做项目时，测试环境路由正常，本地也是正常，到了过渡环境报错Avoided redundant navigation，大致意思就是避免冗余导航，可能是我要跳转的路由中包含共同的/user，查了几篇博客，由于多数人转载不注明出处，在这里如果原创作者看到请及时联系我，我将即使更新原创链接。 解决方案:在router文件加下index.js或者router.js中添加如下代码 import Vue from 'vue' import VueRouter from 'vue-router' //核心
Vue - 报错Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location
🏆 前端领域优质创作者
11-16 2583
vue2，vue2报错，浏览器控制台报错，vue2网页网站路由报错，vue中出现路由导航出现Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "xxx"，vue重复点击菜单报错怎么办，vue路由报错如何解决，vue怎么解决重复点击路由报错问题，解决Vue路由导航报错:NavigationDuplicated，成功解决，Vue路由导航报错，Vue - 报错Uncaught
VUE项目 Error: Avoided redundant navigation to current location: “/“.
mdd996735325的博客
08-26 284
在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中Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation报错的解决
jiangjunyuan168的博客
11-23 5376
问题： 当重复点击相同导航时，控制台显示的Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation报错。 解决方法： 1、在router配置文件（/router/index.js）下添加 const VueRouterPush = Router.prototype.push Router.prototype.push = function push (to) { return VueRouterPush.call(t
vue 路由报错 NavigationDuplicated: Avoided redundant navigation to current location
TO_Web的博客
12-10 416
在使用vue-router时出现 报错 解决办法: 在router.js中添加下面代码即可 //获取原型对象上的push函数 const originalPush = VueRouter.prototype.push //修改原型对象中的push方法 VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) } ...
vue项目中vue-router报错，但是可以正常使用，报错：Avoided redundant navigation to current location
qq_43305958的博客
08-23 499
vue项目中vue-router报错，但是可以正常使用二、解决步骤1.报错信息2.解决方法总结 # 一、Vue Router是什么？ Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有： 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式，在 IE9 中
解决Vue控制台报错：NavigationDuplicated: Avoided redundant navigation to current location
越努力越幸运的博客
12-11 1935
它的提示是 避免到当前位置的冗余导航。 简单来说就是重复触发了同一个路由。 解决方法如下： 在router文件夹下的index.js文件中添加这几行代码即可： const originalPush = Router.prototype.push //解决报错信息：NavigationDuplicated: Avoided redundant navigation to current location Router.prototype.push = function push(location) { r
NavigationDuplicated: Avoided redundant navigation to current location: “/fristhome/product“.
~牧马~
08-25 2200
原因：Uncaught (in promise) navigationduplicate:避免冗余导航到当前位置:“/ frishome /product”。解决方法：找到router/index.js 配置下面。简单来说，就是路由重复性的加载导致路由沉余。
vue2里面的Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location
weixin_47652940的博客
11-26 824
注意，Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location不影响程序的执行效果，只是控制台会爆红，不在意可以不去修改，并且vue3中不会出现这种情况。这里的location告诉原来的push、replace方法往哪里跳转，传递哪些参数；resolve是成功的回调，reject是失败的回调。
成功解决NavigationDuplicated: Avoided redundant navigation to current location:
shazhengjing的博客
10-09 8549
成功解决NavigationDuplicated: Avoided redundant navigation to current location:
解决：vue项目中Avoided redundant navigation to current location问题
L_2017的博客
06-18 434
解决：vue项目中Avoided redundant navigation to current location问题问题解决 问题 vue项目中重复点击菜单导航报错 路由重复 解决 在router/index.js文件内添加代码 方法一： import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) //获取原型对象上的replace函数 const originalReplace = Vue
Avoided redundant navigation to current location
q1424966670的博客
07-02 1万+
在VUE中路由遇到Error: Avoided redundant navigation to current location:报错显示是路由重复， 虽然对项目无影响，但是看到有红的还是不舒服。 于是查了一下发现可以这样解决 在你引入VueRouter的时候再加上一句话： const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return orig...
NavigationDuplicated: Avoided redundant navigation to current location: “/xxx“.
weixin_46351593的博客
02-08 282
错误： NavigationDuplicated: Avoided redundant navigation to current location: “/xxx”. 原因： 避免到当前位置的冗余导航，是指路由重复。 虽然对项目没有太大影响，但是看到红字十分影响心情。 解决方法： 在router文件夹下的index.js文件中添加如下代码： // 获取原型对象中的push方法 const originalPush = VueRouter.prototype.push // 修改原型对象中的push方法
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
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location
qq_45796592的博客
04-19 3844
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location报错解决
Error: Avoided redundant navigation to current location
约妲己吃火锅的博客
08-05 904
推荐一篇不错的博客：https://blog.csdn.net/ZHOU_CXY/article/details/106565480?utm_medium=distribute.pc_category.none-task-blog-hot-1.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-1.nonecase&request_id=
解决Vue报错：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location...
程序员小明1024
12-17 8214
一、重复点击导航时，控制台出现报错 ，虽然不影响功能使用，但也不能坐视不管。 解决方案： 方案一：只需在 router 文件夹下，添加如下代码： import Vue from 'vue' import VueRouter from 'vue-router' import Home from '@/views/Home' import Main from '@/views/Main' imp...
VUE项目路由报错 error: Avoided redundant navigation to current location:
web_DaCaiJi的博客
06-17 2693
问题： 在VUE中路由遇到Error: Avoided redundant navigation to current location:报错显示是路由重复 解决办法： 虽然对项目无影响，但是看到有红的还是不舒服。 于是查了一下发现可以这样解决： router文件夹下面的index.js中加上下面几句代码 const originalPush = Router.prototype.push Router.prototype.push = function push(location) {
Avoided redundant navigation to current location: "/home". NavigationDuplicated: Avoided redundant navigation to current location: "/home".
最新发布
12-26
在 Vue.js 项目中使用 Vue Router 时，导航到当前位置时出现 `NavigationDuplicated` 错误，是因为 Vue Router 会阻止重复导航到当前路由，以避免不必要的操作和性能问题。以下是几种解决该问题的方法： ### 方法一：捕获并忽略错误 在 Vue Router 的实例中，重写 `push` 和 `replace` 方法，捕获 `NavigationDuplicated` 错误并忽略它。 ```javascript import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const originalPush = VueRouter.prototype.push; VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => { if (err.name !== 'NavigationDuplicated') throw err; }); }; const originalReplace = VueRouter.prototype.replace; VueRouter.prototype.replace = function replace(location) { return originalReplace.call(this, location).catch(err => { if (err.name !== 'NavigationDuplicated') throw err; }); }; const router = new VueRouter({ routes: [ // 路由配置 ] }); export default router; ``` ### 方法二：在导航前检查当前路由 在进行导航操作之前，先检查当前路由是否与目标路由相同，如果相同则不进行导航。 ```javascript // 在组件中使用 this.$router.currentRoute.path === '/home' ? null : this.$router.push('/home'); // 在函数中使用 function navigateToHome(router) { if (router.currentRoute.path !== '/home') { router.push('/home'); } } ``` ### 方法三：使用 `catch` 捕获错误 在每次调用 `push` 或 `replace` 方法时，使用 `catch` 方法捕获 `NavigationDuplicated` 错误。 ```javascript this.$router.push('/home').catch(err => { if (err.name === 'NavigationDuplicated') { // 忽略错误 } else { // 处理其他错误 console.error(err); } }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值