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

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

推荐整理分享解决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 异常。（