位置: IT常识 - 正文
解决Vue报错：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location(vue uncaught typeerror)
编辑：rootadmin推荐整理分享解决Vue报错：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location(vue uncaught typeerror)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vuex unknown mutation type,vue uncaught typeerror,vuecli报错,vue unmounted,vue unable to preventdefault,vue unable to preventdefault,vue unable to preventdefault,vue unknown custom element,内容如对您有帮助，希望把文章链接给更多的朋友！
问题描述：重复点击导航时，控制台出现报错 ，虽然不影响功能使用，但也不能坐视不管。
解决 Vue 重复点击相同路由，出现 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation 问题 .
报错内容：
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/home".
浏览器控制台 · 报错截图：解决方案：方案一：只需在 router 文件夹下，添加如下代码：
// src/router/index.jsVue.use(Router)const router = new Router({routes})const VueRouterPush = Router.prototype.pushRouter.prototype.push = function push (to) {return VueRouterPush.call(this, to).catch(err => err)}方案二：在跳转时，判断是否跳转路由和当前路由是否一致，避免重复跳转产生问题。
toMenu (item) {if (this.$route.path !== item.url) {this.$router.push({ path: item.url })}}方案三：使用 catch 方法捕获 router.push 异常。
this.$router.push(route).catch(err => {console.log('输出报错',err)})这个异常其实对程序没有什么影响。出现这个问题是因为重复点击了相同的路由引起的：编程式导航路由跳转到当前路由，参数不变，在多次执行时会抛出Uncaught (in promise) NavigationDuplicated 异常。（
上一篇：全网最详细的nodejs卸载和安装教程(全网最详细的李白解说来了)
下一篇：CSS3如何调整背景图片大小(css3两种调整背景图片大小的方式)
