vue-router.esm.js:2089 Uncaught (in promise) t {_name: "NavigationDuplicated", name: "NavigationDupl

最新推荐文章于 2023-09-01 11:39:17 发布
原创 最新推荐文章于 2023-09-01 11:39:17 发布 · 872 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

博客介绍了安装vue-router 3.0版本的操作，通过执行运行 npm i vue-router@3.0 -S 即可完成安装。

执行运行  npm i vue-router@3.0 -S 即可。

报错 | vue-router.esm.js?3423:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navig
不爱吃菜的菜菜的博客
07-27 2973
在点击同一个跳转路由的时候，点一下并没有报错，但是多点几下就会报错，看了网上的解决办法。但是不知道为什么，求各位大佬解答！
vue报错vue-router.esm.js?8c4f:2062 Uncaught (in promise) Error: Avoided redundant navigation to curren
达拉崩巴斑得贝迪卜多比鲁翁_
09-02 582
在写导航切换时点击会有以下报错 这个报错是是路由中点击路径重复 ，也有可能是安装的vue-router还是之前出错的那个版本，在项目目录下运行 npm i vue-router@3.0 -S 即可。 解决方法1：在 main.js里添加一段代码。 代码如下： import Router from 'vue-router' const routerPush = Router.prototype.push Router.prototype.push = function push(location) {
vue报错 vue-router.esm.js?8c4f:2089 Uncaught (in promise)
qq_41605928的博客
03-25 2413
在main.js里面加上以下代码即可 import Router from ‘vue-router’; const routerReplace = Router.prototype.replace; Router.prototype.replace = function replace(location) { return routerReplace .call(this, location)....
vue-router报错 vue-router.esm.js?8c4f:2089 Uncaught (in promise)
莹儿的博客
04-11 5485
在router/index.js下重定向了路由 在组件里用到了动态路由 点击首页时就会报错 报错的原因是直接调用了获取动态路由的方法，在获取动态路由的方法 中定义了一个go方法，这是一个异步操作，正在进行异步操作的时候就 进行重定向就会报这个错 解决的办法是使用es7 异步函数， 这是修改后的代码： 这样就可以了 ...
vue-router报错: Uncaught (in promise) undefined
qq_40815009的博客
04-27 8095
背景描述: vue项目，做登录页，点击登录按钮时，nextwork显示已经登录成功，但是console中报错 vue-router.esm.js?8c4f:2089 Uncaught (in promise) undefined 并且没有跳转到默认页面。 参考别人博客发现是vue-router跳转方法的问题。 *1.router.push(location)=====window.history....
vue router 报错： Uncaught (in promise) NavigationDuplicated {_name:““NavigationDuplicated“... 的解决方法
weixin_43185419的博客
08-23 837
参考大佬的解决方法：https://blog.csdn.net/weixin_43202608/article/details/98884620 在router文件夹下的index中添加如下代码： import Router from 'vue-router' const originalPush = Router.prototype.push Router.prototype.push = function push(location) { return originalPush.call(this
vue-router.esm.js:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to
hua_ban_yu的博客
08-18 7200
在开发vue项目使用路由跳转当前页面发现控制台报错 vue-router.esm.js:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/instDetail?instId=3" 错误。 错误原因：使用this.$router.push跳转页面时，对应的query参数和当前地址栏上的参数一样导致 解决方案： 判断地址栏上的in...
vue-router.esm-bundler.js6c021474 Uncaught TypeError Cannot read property ‘forEach‘ of undefined
m0_67393593的博客
03-09 715
关于vue-cli4.5.13中使用vue-router报错的问题。 以下是报错详情： vue-router.esm-bundler.js?6c02:1474 Uncaught TypeError: Cannot read property 'forEach' of undefined at createRouterMatcher (vue-router.esm-bundler.js?6c02:1474) at new createRouter (vue-router.esm-bundler
vue-router.esm.js:2053 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/preWarning_test/warningTask?myToDo=true".
最新发布
11-14
`Uncaught (in promise) NavigationDuplicated` 错误通常是由于在 Vue Router 中进行了冗余的导航操作，即尝试导航到当前已经处于的路由位置。可以通过以下几种方法解决这个问题： ### 方法一：重写路由跳转方法 在...
vue-router报错：Uncaught (in promise) NavigationDuplicated {_name: ‘NavigationDuplicated‘, name: ‘Navig
sherlyxoxo的博客
07-30 774
vue-router的NavigationDuplicated错误
vue-router.esm.js: Error: “Loading chunk 0 failed“ 完美解决方案
盏茶作酒的博客
07-22 1万+
最近做项目遇到一个非常头疼的问题，就是在加上 vue-route 后， 火狐浏览器 访问路由会卡住，有些浏览器会，有些不会。所以一直用 chrome/chromium 开发，但是这种浏览器兼容性问题是一定要解决的，虽然只是部分电脑，但是非常不友好。 问题 今天再次尝试，发现一旦等待时间久了，就会出现如下错误 vue-router.esm.js: Error: "Loading chunk 0 failed." 这个错误，前段时间找了好多资料，没能解决。今天再次去找，也是参考了很..
vue-router.esm.js?8c4f:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation
weixin_44061521的博客
08-09 1074
问题 在做前后端分离项目的时候，vue使用路由进行界面跳转时，出现了以下错误，说是路由重复啥的，之前的项目都没这问题。。 vue-router.esm.js?8c4f:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “/success”. 解决方案 在router目录下的index.js文件中加上这么一段话即可 const originalPush = ro
报错：vue-router.esm.js:2316 RangeError: Maximum call stack size exceeded
2301_77456141的博客
09-01 1090
因为在第一次判断结束后，代码进入下一阶段，可是路由守卫却还在继续运行，形成了死循环，所以需要通过return来跳出函数，终止本次请求。我们可以看到是路由页面出现了错误，大概意思是栈超出了最大容量，这种错误往往是因为。对比后我i们可以看到，是因为在第一次判断时。
vue-router.esm.js?a12b:2046 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation
object not found的博客
11-17 5886
路由重复点击报错解决方法
【vue-router.esm.js?8c4f:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigati】
博文致力于人工智能算法的探索研究；前后端分离项目的技术分享交流；专升本计算机基础课程内容讲解；各种中间件技术分享
12-14 1203
vue-router.esm.js?8c4f:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation 遇到如上异常：解决方案如下： //在main.js中添加以下代码 import Router from 'vue-router' const routerPush = Router.prototype.push Router.prototype.push = function push(location) {
vue router 报错： Uncaught (in promise) NavigationDuplicated {_name:""NavigationDuplicated"... 的解决方法
aGreetSmile的博客
09-06 2976
今天在写项目时发现了在点击 路由跳转 会造成报错的问题， 报错内容为： 在引入importRouterfrom'vue-router'文件里面添加如下代码： constoriginalPush=Router.prototype.push Router.prototype.push=functionpush(location){ returnoriginalPu...
vue项目报错vue-router.esm.js?8b48:2007 Uncaught (in promise)
Calmlyx的博客
11-18 1121
今天做vue项目时，当我多次点击跳转路由的时候，控制台报错： 两种解决方案： 方法一： 原因可能是在重新下载依赖包时，安装的vue-router还是之前出错的那个版本，在项目目录下运行 npm i vue-router@3.0 -S 即可。 方法二： 在main.js中添加以下代码： import VueRouter from 'vue-router'; const router...
vue router 报错： Uncaught (in promise) NavigationDuplicated {_name:""NavigationDuplicated"... 的解决方法
热门推荐
weixin_43202608的博客
08-08 5万+
今天在写项目时发现了在点击 router-link 会造成报错的问题， 报错内容为： 废话不多说，解决方法很简单，把项目依赖的 node_modules 文件夹删除， 然后再 npm install 重新下载依赖包就可以解决。 ...
vue-router.esm.js:2046 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/adm".
05-19
### Vue Router 中避免重复导航到当前位置的解决方案 在 Vue.js 使用 vue-router 进行路由管理时，可能会遇到 `NavigationDuplicated` 错误提示。这种错误通常发生在尝试导航至当前已经激活的路由时[^1]。 #### 问题原因分析 当调用 `router.push()` 或其他导航方法时，如果目标路径与当前路径相同，则会抛出 `NavigationDuplicated` 警告。尽管此警告不会影响应用的功能，但它会在开发环境中显示于控制台，可能干扰开发者调试体验[^2]。 --- #### 解决方案一：重写 `push` 方法捕获异常 通过覆盖 `VueRouter.prototype.push` 方法来捕获并处理潜在的错误，从而避免控制台中出现冗余导航警告。以下是实现代码： ```javascript // 导入必要的模块 import Vue from 'vue'; import VueRouter from 'vue-router'; // 安装 VueRouter 插件 Vue.use(VueRouter); // 备份原始的 push 方法 const originalPush = VueRouter.prototype.push; // 替换原有的 push 方法，增加错误捕获逻辑 VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch((err) => { if (err.name !== 'NavigationDuplicated') throw err; console.warn('Redundant navigation detected and ignored.'); }); }; // 配置路由规则 const routes = [ { path: '/', component: () => import('@/views/Home.vue') }, // 其他路由配置... ]; export default new VueRouter({ mode: 'history', routes, }); ``` 这种方法的核心在于利用 `.catch(err => err)` 来阻止未被捕获的 Promise 拒绝状态传播给全局处理器[^3]。 --- #### 解决方案二：条件判断防止重复跳转 另一种方式是在执行导航之前先检查目标地址是否等于当前活动地址。这样可以从根本上避免触发相同的路由切换操作。 ```javascript function safeNavigate(routerInstance, targetRoute) { if (routerInstance.currentRoute.path === targetRoute) { console.log(`Already on route "${targetRoute}", skipping navigation.`); return; } routerInstance.push(targetRoute); } // 示例用法 safeNavigate(this.$router, '/home'); ``` 这种方式更加直观易懂，并且不需要修改框架内部行为即可解决问题[^4]。 --- ### 总结 两种主要策略都可以有效应对 `NavigationDuplicated` 提醒消息： - **重定义 `push` 函数**适用于希望统一处理所有场景下的情况； - **提前验证路径差异性再决定是否继续推进流程**则更贴近具体业务需求定制化程度较高。 无论采用哪种手段都需注意保持代码可读性和维护便利性，在实际项目里可以根据团队偏好和技术栈特点灵活选用合适的方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值