Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/xxx". at createRouterError 的说明和解决
错误说明
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/xxx". at createRouterError
这个错误是说着在promise里捕获了一个导航的重复定义,因为这里是使用编程式导航去进行路由跳转的,$router.push
方法会返回一个promise对象。在这里重复的push
了同一个路由地址,所以就报了这个错误。
有时也会报这个错Uncaught (in promise) Error: Navigation cancelled from "/xxx" to "/xxx" with a new navigation
具体例子可看下面。
错误定位
<template>
<div @click="toDetail(item.articleId)">
<el-button @click="toDetail(item.articleId)">阅读</el-button>
</div>
</template>
<script>
export default{
methods:{
toDetail(id) {
this.$router.push({ name: 'detail', params: { articleId: id } })
}
}
}
</script>
因为el-button
是在div
里的,所按钮点击的时候会有两个click
都调用了相同的push
错误解决
方法一
把嵌套的子元素中的触发路由的事件去掉,这里把el-button
中的click
去掉就行了。
方法二
因为这个错误是在push
中抛出的,所以在其中捕获catch
这个错误就行了,不过这似乎是个治标不治本的办法,所有在push
中的错误都可以用此法捕获。
在路由中,添加如下代码进行配置:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
// 捕获push replace中的错误
// 当然在replace中的错误也是可以相同的进行捕获
const originalPush = VueRouter.prototype.push
const originalReplace = VueRouter.prototype.replace
// push
VueRouter.prototype.push = function push(location, onResolve, onReject) {
if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
return originalPush.call(this, location).catch(err => err)
}
// replace
VueRouter.prototype.replace = function push(location, onResolve, onReject) {
if (onResolve || onReject) return originalReplace.call(this, location, onResolve, onReject)
return originalReplace.call(this, location).catch(err => err)
}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用