Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current

Vue Router 错误处理

最新推荐文章于 2025-12-02 21:41:05 发布

原创最新推荐文章于 2025-12-02 21:41:05 发布 · 248 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

本文介绍了一种在 Vue Router 中处理导航错误的方法，通过覆盖默认的 push 方法来捕获并处理可能出现的错误。

const VueRouterPush = VueRouter.prototype.push

VueRouter.prototype.push = function push(to) {
    return VueRouterPush.call(this, to).catch(err => err)
}

在router/index.js中加上这行代码

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

湖边看客

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue - 报错Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location

🏆 前端领域优质创作者

11-16

2523

vue2，vue2报错，浏览器控制台报错，vue2网页网站路由报错，vue中出现路由导航出现Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "xxx"，vue重复点击菜单报错怎么办，vue路由报错如何解决，vue怎么解决重复点击路由报错问题，解决Vue路由导航报错:NavigationDuplicated，成功解决，Vue路由导航报错，Vue - 报错Uncaught

vue2里面的Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location

weixin_47652940的博客

11-26

814

注意，Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location不影响程序的执行效果，只是控制台会爆红，不在意可以不去修改，并且vue3中不会出现这种情况。这里的location告诉原来的push、replace方法往哪里跳转，传递哪些参数；resolve是成功的回调，reject是失败的回调。

参与评论您还未登录，请先登录后发表或查看评论

解决 Uncaught (in promise) Error: Navigation cancelled from “/...“ to “/...“ with a new navigation.

qianduan1020的博客

09-13

3435

报错如下：解决方法：在路由器router里面的index.js里面加上下面这段代码就没事了 const originalPush = Router.prototype.push const originalReplace = Router.prototype.replace Router.prototype.push = function push(location, onResolve, onReject) { if (onResolve || onReject) { return o

解决：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location

weixin_71403100的博客

03-25

2451

问题：解决vue路由传递参数时，重复点击会抛出NavigationDuplicated的警告错误。原因：vue-router引入了promise, push的时候会返回一个promise。解决方法一：给push方法直接传成功和失败的回调函数。解决方法二：在路由内重写push或replace方法。

使用vuejs3时，报错：Uncaught (in promise)

宝码香车的博客

06-14

1340

解决报错：Uncaught (in promise)

Uncaught (in promise) undefined

lys20000913的博客

01-07

1万+

检查报错路径中是否使用到Promise如果使用到检查reject的时候是否写了.catch 没有.catch的只有.then的话加上.catch即可例： new Promise((resolve,reject)=>{ reject() }).then(res=>{ }).catch(err=>{ }) ...

Uncaught TypeError: Cannot read property ‘D‘ of undefined

小丁的博客

02-05

4192

你遇到的渲染层错误“Uncaught TypeError: Cannot read property ‘D’ of undefined”可能是由于微信开发者工具版本不兼容或代码中的问题导致的。建议尝试更换调试基础库、检查代码错误、更新开发者工具和框架版本，以及清理缓存并重新编译，以解决此问题。

Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location

qq_45796592的博客

04-19

3833

Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location报错解决

解决Vue报错：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location

热门推荐

草巾冒小子的博客

02-21

2万+

问题描述：重复点击导航时，控制台出现报错，虽然不影响功能使用，但也不能坐视不管。解决 Vue 重复点击相同路由，出现 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation 问题 . 报错内容： Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/home". 浏览器

NavigationDuplicated: Avoided redundant navigation to current location: “/fristhome/product“.

~牧马~

08-25

2181

原因：Uncaught (in promise) navigationduplicate:避免冗余导航到当前位置:“/ frishome /product”。解决方法：找到router/index.js 配置下面。简单来说，就是路由重复性的加载导致路由沉余。

vue中Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation报错的解决

jiangjunyuan168的博客

11-23

5367

问题：当重复点击相同导航时，控制台显示的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

如何解决NavigationDuplicated: Avoided redundant navigation to current location:问题

张居然的博客

11-22

967

vue-router.esm.js?a12b:2046 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/?k=". at createRouterError (webpack-internal:///./node_modules/_vue-router@3.6.5@vue-router/dist/vue-router.esm.js:1714:15)

异常解决---Uncaught (in promise) NavigationDuplicated {_name: "NavigationDuplicated"}的解决方法

一块小砖头的博客

10-11

2030

@[TOC](异常解决—Uncaught (in promise) NavigationDuplicated {_name: “NavigationDuplicated”}的解决方法) 使用vue做项目的时候，点击左侧同一个页面(相同路由)会导致报错 Uncaught (in promise) NavigationDuplicated {_name: "NavigationDuplicated",...

解决Vue报错：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location...

程序员小明1024

12-17

8132

一、重复点击导航时，控制台出现报错，虽然不影响功能使用，但也不能坐视不管。解决方案：方案一：只需在 router 文件夹下，添加如下代码： import Vue from 'vue' import VueRouter from 'vue-router' import Home from '@/views/Home' import Main from '@/views/Main' imp...

uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current loaction ‘xxxxxx

Yuan_Xiao_Tian_的博客

10-27

729

解决方法：在路由内重写push或replace方法。本文仅记录自己遇到的问题。

前端在移动端中的页面切换

2509_93939582的博客

11-28

584

记得加硬件加速，用transform和opacity属性，别动不动改布局属性（比如width或height），那样容易引发重排重绘，卡成幻灯片。不过，SPA也不是万能药，它初次加载可能慢点，得靠代码分割和懒加载来优化——比如把不常用的模块拆开，等用户需要时再加载，这样既省资源又提速。还有，别忘了图片和视频的懒加载：页面切换时，先加载核心内容，图片等可视区域再加载，这样首屏能秒开。另外，内存管理也得注意，SPA容易内存泄漏，切换页面时记得清理事件监听器和定时器，不然用久了手机会变卡。

Vue 通用复选框组互斥 Hooks：兼容 Element Plus + Ant Design Vue