解决 Vue 重复点击相同路由，出现 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation 问题

问题描述：重复点击导航时，控制台出现报错，虽然不影响功能使用，但也不能视而不见。

解决方案：

方案一：只需在 router 文件夹下，添加如下代码：

// src/router/index.js
Vue.use(Router)
const router = new Router({routes
})const VueRouterPush = Router.prototype.push
Router.prototype.push = function push (to) {return VueRouterPush.call(this, to).catch(err => err)
}

方案二：在跳转时，判断是否跳转路由和当前路由是否一致，避免重复跳转产生问题。

goMenu (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)
})

解决 Vue 重复点击相同路由，出现 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation 问题相关推荐

四种解决Vue中重复点击相同路由控制台报错问题（ Avoided redundant navigation to current location）
vue-router 升级到3.1.x 后,重复点击导航时,控制台出现报错 ,虽然不影响功能使用,但是看的就不舒服. 报错信息 Uncaught (in promise) NavigationDupl ...
Vue-Router 路由重复点击时报错 Uncaught (in promise) NavigationDuplicated:Avoided redundant navigation to curr
前言总结一下,在项目中遇到的一个小问题,使用 Vue 构件的项目里,有时候会存在重复点击路由报错的问题,Uncaught (in promise) NavigationDuplicated:Av ...
解决Vue报错：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location
问题描述:重复点击导航时,控制台出现报错 ,虽然不影响功能使用,但也不能坐视不管. 解决 Vue 重复点击相同路由,出现 Uncaught (in promise) NavigationDuplica ...
Vue的router导航重复-报错：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to curren
报错: Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: &q ...
解决报错：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “
报错内容: vue-router.esm.js?68cf:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navi ...
vue报错Uncaught (in promise) NavigationDuplicated:Avoided redundant navigation
vue-router.esm.js?3423:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation ...
解决Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location问题
在Vue路由中遇到Error: Avoided redundant navigation to current location:xxxx:错误,意思是路由重复在router文件夹下的index.j ...
Uncaught (in promise) Error: Avoided redundant navigation to current location: “/index“. 解决方法
在router.js中加入以下代码就可以 const originalPush = Router.prototype.push Router.prototype.push = function pus ...
vue报错vue-router.esm.js?8c4f:2062 Uncaught (in promise) Error: Avoided redundant navigation to curren
在写导航切换时点击会有以下报错这个报错是是路由中点击路径重复 ,也有可能是安装的vue-router还是之前出错的那个版本,在项目目录下运行 npm i vue-router@3.0 -S 即可. ...

解决 Vue 重复点击相同路由，出现 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation 问题

解决 Vue 重复点击相同路由，出现 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation 问题相关推荐

最新文章

热门文章