解决 vue-router 升级导致的 Uncaught (in promise) NavigationDuplicated

1 导致错误原因

路由跳转有两种形式：

声明式：<router-link :to="...">
编程式：router.push(...)

声明式导航是没有这种问题的，这是因为 vue-router 底层已经处理好了。

而编程式导航连续点击进行路由跳转的时候，就会在控制台抛出 Uncaught (in promise) NavigationDuplicated 错误信息，错误信息如下：

这是因为 vue-router 版本升级到了 v3.1.0 之后，push 和 replace 方法会返回一个 promise，如果没有对错误进行捕获，那么控制台就会输出未捕获异常。

2 解决方法

使用时对错误进行捕获。

this.$router.push('about').catch(err => { return err })

使用时给 push 传递相应的成功、失败的回调函数。

this.$router.push({ path: 'about' }, () => {}, () => {})

降低 vue-router 版本为 3.0。

npm install vue-router@3.0

重写 push 和 replace 方法，只需要在 router 文件夹下的 index.js 文件里面加入如下代码即可。

import VueRouter from 'vue-router'// 解决 vue-router 升级导致的 Uncaught(in promise)
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {return originalPush.call(this, location).catch(err => err)
}const originalReplace = VueRouter.prototype.replace
VueRouter.prototype.replace = function replace (location) {return originalReplace.call(this, location).catch(err => err)
}Vue.use(VueRouter)

注意：VueRouter.prototype.push中的VueRouter要与import VueRouter from 'vue-router'中的VueRouter名称一致并且要写在Vue.use(VueRouter)之前。

解决 vue-router 升级导致的 Uncaught (in promise) NavigationDuplicated相关推荐

vue router 报错： Uncaught (in promise) NavigationDuplicated {_name:““NavigationDuplicated“... 的解决方法
报错方法一.更换版本 npm i vue-router@3.0 -S 方法二修改入口文件 //main.js import Router from 'vue-router'const origin ...
解决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 ...
vue报错 Uncaught (in promise) NavigationDuplicated {_name:““NavigationDuplicated“... 的解决方法
vue报错 Uncaught (in promise) NavigationDuplicated {_name:""NavigationDuplicated"... 的解 ...
解决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) NavigationDuplicated: Avoided redundant navigation to current location: “
报错内容: vue-router.esm.js?68cf:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navi ...
解决路由报错Uncaught (in promise) NavigationDuplicated:
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: " ...
vue报错Uncaught (in promise) NavigationDuplicated:Avoided redundant navigation
vue-router.esm.js?3423:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation ...
vue发送请求时遇到Uncaught (in promise) TypeError Cannot read properties of undefined(reading ‘randomExtend
最近在项目中遇到一个前端问题Uncaught (in promise) TypeError: Cannot read properties of undefined(reading 'randomEx ...

解决 vue-router 升级导致的 Uncaught (in promise) NavigationDuplicated

解决 vue-router 升级导致的 Uncaught (in promise) NavigationDuplicated

1 导致错误原因

2 解决方法

解决 vue-router 升级导致的 Uncaught (in promise) NavigationDuplicated相关推荐

最新文章

热门文章