问题描述

在升级了Vue-Router版本到到3.1.0及以上之后，页面在跳转路由控制台会报Uncaught (in promise) Error的问题

Vue更新日志

https://github.com/vuejs/vue-router/releases

V3.1.0版本里面新增功能：push和replace方法会返回一个promise, 你可能在控制台看到未捕获的异常

问题分析

解释：没有捕获异常。

解决方案

方法一：检查代码

1、首先检查router.js中的路由path和name是否有误

2、查看main.js中的路由beforeEach导航守卫的路由跳转是否写错。

方法二：回退版本

在项目目录下运行

npm i vue-router@3.0 -S

将vue-router改为3.0版本即可；

方法三：捕获异常

1、在调用方法的时候用catch捕获异常

this.$router.replace({ name: 'foo' }).catch(err => {console.log('all good')
})

2、对Router原型链上的push、replace方法进行重写，这样就不用每次调用方法都要加上catch。

这个方法是vue-router的issues里面的一位大佬解决的

// 解决Vue-Router升级导致的Uncaught(in promise) navigation guard问题
const originalPush = VueRouter.prototype.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方法同上

// 解决Vue-Router升级导致的Uncaught(in promise) navigation guard问题
const originalReplace = VueRouter.prototype.replace
VueRouter.prototype.replace = function replace (location, onResolve, onReject) {if (onResolve || onReject) return originalReplace.call(this, location, onResolve, onReject)return originalPush.call(this, location).catch(err => err)
}

参考文章

https://blog.csdn.net/haidong55/article/details/100939076

https://forum.vuejs.org/t/topic/97260

https://www.cnblogs.com/xinheng/p/13019818.html

https://blog.csdn.net/ShIcily/article/details/102668403

https://blog.csdn.net/sunrj_niu/article/details/106902138

https://blog.csdn.net/Jone_hui/article/details/107411530

https://blog.csdn.net/qq_37875903/article/details/107494973

https://segmentfault.com/q/1010000019723749

Vue——Vue-Router的push和replace方法[Uncaught (in promise) Error]解决方案相关推荐

Vue-Router的push和replace方法[Uncaught (in promise) Error]解决方案
解决报错Uncaught (in promise) Error: Redirected when going from - 对Router原型链上的push.replace方法进行重写,这样就不用每次 ...
Vue的router导航重复-报错：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to curren
报错: Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: &q ...
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.js项目中控制台报错： Uncaught (in promise) NavigationDuplicated解决方法
问题愿意:依赖包中vue-router出现问题(猜测为版本问题): 解决方法:在项目目录下运行 npm i vue-router@3.0 -S 这条指令就可以解决了.(更换版本) 或者在main.js ...
解决 Vue 重复点击相同路由，出现 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation 问题
问题描述:重复点击导航时,控制台出现报错 ,虽然不影响功能使用,但也不能视而不见. 解决方案: 方案一:只需在 router 文件夹下,添加如下代码: // src/router/index.js V ...
解决vue重复点击路由报错问题:Uncaught (in promise) NavigationDuplicated
直接在路由router文件夹下加上下面代码: import routes from './router'方法一: const originalPush = Router.prototype.push ...
Uncaught (in promise) Error: Avoided redundant navigation to current location: “/index“. 解决方法
在router.js中加入以下代码就可以 const originalPush = Router.prototype.push Router.prototype.push = function pus ...
Vue路由跳转-push，replace的区别
1.this.$router.push() 跳转到指定的url,此方法会向history栈添加一个记录,点击后退会返回到上一个页面. 2.this.$router.replace() 跳转到指定的ur ...
Vue中报错： Uncaught (in promise) Error:Redirected when going from “x“ to “x“ via a navigation guard
项目中遇到如图的错误是因为router的版本问题和vue/lic有冲突解决方法: 删除 node_modules ,到 package.json 中将 vue-router 改为最新稳定版 ,当 ...

Vue——Vue-Router的push和replace方法[Uncaught (in promise) Error]解决方案