解决Vue-Router升级导致的Uncaught (in promise)问题

 更新时间:2020年08月07日 09:20:29   作者:只想做个好人啊  
这篇文章主要介绍了解决Vue-Router升级导致的Uncaught (in promise)问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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

这是什么原因呢?

看vue-router的版本更新日志

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

解决方法一:在调用方法的时候用catch捕获异常

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

方法二: 对Router原型链上的push、replace方法进行重写,这样就不用每次调用方法都要加上catch。这个方法是vue-router的issues里面的一位大佬解决的

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)问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 解决vue-cli输入命令vue ui没效果的问题

    解决vue-cli输入命令vue ui没效果的问题

    这篇文章主要介绍了解决vue-cli输入命令vue ui没效果的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue中router-link常用属性使用案例讲解

    Vue中router-link常用属性使用案例讲解

    这篇文章主要介绍了Vue中router-link常用属性使用案例讲解,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-01-01
  • Vue利用vue-baidu-map实现获取经纬度和搜索地址

    Vue利用vue-baidu-map实现获取经纬度和搜索地址

    在开发项目的时候,发现需要获取经纬度,由于这个项目是用vue写的,最后决定使用vue-baidu-map来快速获取经纬度,感兴趣的可以了解一下
    2022-09-09
  • Vue页面刷新记住页面状态的实现

    Vue页面刷新记住页面状态的实现

    这篇文章主要介绍了Vue页面刷新记住页面状态的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-12-12
  • npm install安装报错的几种常见情况

    npm install安装报错的几种常见情况

    当你跑起一个项目的时候,第一步需要先安装依赖npm install,下面这篇文章主要给大家介绍了关于npm install安装报错的几种常见情况,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • vue-cli3中如何打包成zip压缩文件

    vue-cli3中如何打包成zip压缩文件

    这篇文章主要介绍了vue-cli3中如何打包成zip压缩文件,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue动态绑定background的方法

    vue动态绑定background的方法

    background是background-color,background-image,background-repeat,background-attachment,background-position,background-size等属性的缩写,本文我用动态绑定background-image来举例,感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • vue2.0模拟锚点的实例

    vue2.0模拟锚点的实例

    下面小编就为大家分享一篇vue2.0模拟锚点的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 基于element-UI input等组件宽度修改方式

    基于element-UI input等组件宽度修改方式

    这篇文章主要介绍了基于element-UI input等组件宽度修改方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • 深入详解Vue中的路由懒加载

    深入详解Vue中的路由懒加载

    路由懒加载是一种优化技术,用于延迟加载应用程序中的路由组件,它可以提高初始加载速度并减少资源消耗,特别适用于大型单页应用,下面我们就来看看它的原理与使用吧
    2023-08-08

最新评论