解决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 相关文章推荐
Web前端设计模式  制作漂亮的弹出层
Oct 29 Javascript
基于jquery的鼠标拖动效果代码
May 30 Javascript
js DOM 元素ID就是全局变量
Sep 20 Javascript
js导入导出excel(实例代码)
Nov 25 Javascript
深入理解javascript中return的作用
Dec 30 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
Dec 31 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
Nov 10 Javascript
Vue打包后出现一些map文件的解决方法
Feb 13 Javascript
详解Vue单元测试case写法
May 24 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 Javascript
Vue中的this.$options.data()和this.$data用法说明
Jul 26 Javascript
design vue 表格开启列排序的操作
Oct 28 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
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
PHP与Web页面的交互示例详解二
2020/08/04 PHP
表格 隔行换色升级版
2009/11/07 Javascript
Extjs入门之动态加载树代码
2010/04/09 Javascript
深入理解JavaScript是如何实现继承的
2013/12/12 Javascript
javascript框架设计读书笔记之模块加载系统
2014/12/02 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
详谈javascript异步编程
2016/02/21 Javascript
JS验证不重复验证码
2017/02/10 Javascript
js实现添加删除表格(两种方法)
2017/04/27 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
jquery 获取索引值在一定范围的列表方法
2018/01/25 jQuery
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
2020/02/14 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
[47:10]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第二场 12.16
2020/12/18 DOTA
爬山算法简介和Python实现实例
2014/04/26 Python
python实现自动登录人人网并采集信息的方法
2015/06/28 Python
解决Linux系统中python matplotlib画图的中文显示问题
2017/06/15 Python
python xlsxwriter库生成图表的应用示例
2018/03/16 Python
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
python中比较两个列表的实例方法
2019/07/04 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
Superdry瑞典官网:英国日本街头风品牌
2017/05/17 全球购物
LN-CC美国:伦敦时尚生活的缩影
2019/02/19 全球购物
党员年终民主评议的自我评价
2013/11/05 职场文书
入党转预备思想汇报
2014/01/07 职场文书
西双版纳导游词
2015/02/03 职场文书
实践论读书笔记
2015/06/29 职场文书
创业计划书之溜冰场
2019/10/25 职场文书