解决Vue-Router升级导致的Uncaught（inpromise）问题在升级了Vue-Router版本到到3.1.0及以上之后，页⾯在跳转路由控制台会报Uncaught (in promise)的问题
这是什么原因呢？
看vue-router的版本
V3.1.0版本⾥⾯新增功能：push和replace⽅法会返回⼀个promise, 你可能在控制台看到未捕获的异常
解决⽅法⼀：在调⽤⽅法的时候⽤catch捕获异常
this.$place({ name: 'foo' }).catch(err => {
console.log('all good')
})
⽅法⼆：对Router原型链上的push、replace⽅法进⾏重写，这样就不⽤每次调⽤⽅法都要加上catch。这个⽅法是vue-router的⾥⾯的⼀位⼤佬解决的
react router拦截import Router from 'vue-router'
const originalPush = Router.prototype.push
Router.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)
}
补充知识：vue-router使⽤$router.push()，页⾯挂起进⼊debug模式，提⽰Uncaught (in promise) undefined
问题
vue-router使⽤$router.push()跳转页⾯时，页⾯挂起进⼊debug模式，提⽰“Uncaught (in promise) undefined”，断点进⼊
function (err) {
if (onAbort) {
onAbort(err);
}
……
}
此⽅法
分析(）
Uncaught (in promise) undefined，未捕获的promise，因为应⽤程序实际上没有⽣成任何错误。它只是⼀个导航（$router.push），在beforeEnter钩⼦中⽣成重定向（next（'/ foo'））
Vue-router >= 3.1.0 版本在使⽤ push 和 replace 进⾏跳转时控制台会抛出异常，其主要原因是 vue-router 3.1.0 版本以后 router.push('/path') 返回了 promise ，⽽当路由跳转异常时便会抛出错误，此前版本没有报错是因为 vue-router 根本没有返回错误信息，所以之前我们⼀直⽆法捕获异常，⽽并⾮异常不存在。所以我们要做的就是在路由跑出异常时加上可以接收的回调就好了。
解决
1.使⽤route-link to bar代替$push
<router-link to="/settlement_manage/account">
<el-button :disabled="loading" size="mini" type="warning">
查看详情
</el-button>
</router-link>
2.对所有调⽤进⾏push更新：
this.$router.push({
path: '/settlement_manage/account',
}, () => {});
3.使⽤时进⾏错误拦截
router.push('/path').catch(err => {})
4.显式指定onComplete和onAbort回调函数
this.$router.push({
path: `/settlement_manage/account`
},
onComplete => {
console.log('完成')
},
onAbort => {
console.log('哦打断了')
})
5.引⼊router之前重写push⽅法，在router.js⾥加
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)
}
ok！以上所有⽅法亲测有效~
以上这篇解决Vue-Router升级导致的Uncaught (in promise)问题就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。