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


Posted in Javascript onAugust 07, 2020

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

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

这是什么原因呢?

看vue-router的版本更新日志

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

解决Vue-Router升级导致的Uncaught (in 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);
   }
   ……
}

此方法

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

分析()

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

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

ok!以上所有方法亲测有效~

以上这篇解决Vue-Router升级导致的Uncaught (in promise)问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于MooTools的很有创意的滚动条时钟动画
Nov 14 Javascript
JS时间选择器 兼容IE6,7,8,9
Jun 26 Javascript
使用jQuery设置disabled属性与移除disabled属性
Aug 21 Javascript
用jquery修复在iframe下的页面锚点失效问题
Aug 22 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
Dec 17 Javascript
基于jquery实现最简单的选项卡切换效果
May 08 Javascript
jQuery文字横向滚动效果的实现代码
May 31 Javascript
JS实现鼠标框选效果完整实例
Jun 20 Javascript
Vue 过滤器filters及基本用法
Dec 26 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
Jan 02 Javascript
JS实现点星星消除小游戏
Mar 24 Javascript
一篇文章带你从零快速上手Rollup
Sep 07 Javascript
JavaScript实现多文件下载方法解析
Aug 07 #Javascript
基于javascript的无缝滚动动画1
Aug 07 #Javascript
vue-router重写push方法,解决相同路径跳转报错问题
Aug 07 #Javascript
手把手带你搭建一个node cli的方法示例
Aug 07 #Javascript
Vue两种组件类型:递归组件和动态组件的用法
Aug 06 #Javascript
vue数据更新UI不刷新显示的解决办法
Aug 06 #Javascript
基于vue 动态菜单 刷新空白问题的解决
Aug 06 #Javascript
You might like
利用discuz实现PHP大文件上传应用实例代码
2008/11/14 PHP
浅析PHP中Session可能会引起并发问题
2015/07/23 PHP
PHP设计模式之工厂模式(Factory Pattern)的讲解
2019/03/21 PHP
JavaScript 乱码问题
2009/08/06 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
2011/04/07 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
5个最佳的Javascript日期处理类库分享
2012/04/15 Javascript
JS去除右边逗号的简单方法
2013/07/03 Javascript
js 获取元素在页面上的偏移量的方法汇总
2015/04/13 Javascript
AngularJS使用ng-options指令实现下拉框
2016/08/23 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
js实现炫酷的左右轮播图
2017/01/18 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
Angular.js中数组操作的方法教程
2017/07/31 Javascript
使用JavaScript进行表单校验功能
2017/08/01 Javascript
vue中的router-view组件的使用教程
2018/10/23 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
2019/06/18 Javascript
Vue实现商品详情页的评价列表功能
2019/09/04 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
javascript实现拼图游戏
2021/01/29 Javascript
[01:38]DOTA2辉夜杯 欢乐的观众现场采访
2015/12/26 DOTA
[01:16:12]完美世界DOTA2联赛PWL S2 FTD vs Inki 第一场 11.21
2020/11/23 DOTA
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
python使用多进程的实例详解
2018/09/19 Python
使用python制作游戏下载进度条的代码(程序说明见注释)
2019/10/24 Python
pytorch 准备、训练和测试自己的图片数据的方法
2020/01/10 Python
tensorflow入门:tfrecord 和tf.data.TFRecordDataset的使用
2020/01/20 Python
python自动化测试三部曲之request+django实现接口测试
2020/10/07 Python
同步和异步有何异同,在什么情况下分别使用他们?举例说明
2014/02/27 面试题
二年级学生评语大全
2014/04/23 职场文书
先进党支部事迹材料
2014/12/24 职场文书
财务会计求职信范文
2015/03/20 职场文书
运动员入场前导词
2015/07/20 职场文书
2016年“世界气象日”广播稿
2015/12/17 职场文书
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫