位置: IT常识 - 正文

vue-router控制台异常:Uncaught (in promise) Error: Redirected when going from “/“ to “/foo“(vue router)

编辑:rootadmin
vue-router控制台异常:Uncaught (in promise) Error: Redirected when going from “/“ to “/foo“

推荐整理分享vue-router控制台异常:Uncaught (in promise) Error: Redirected when going from “/“ to “/foo“(vue router),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue$router,vue routerview,vue routerlink,vue$router,vue路由控制,vue $route,vue$router,vue$router,内容如对您有帮助,希望把文章链接给更多的朋友!

qian kun微前端在子应用的路由配置中添加了一个全局前置导航守beforeEach,在前置导航守卫中调用next方法时重写了路由的path,结果控制台每次在路由跳转时都会报异常,但是不影响功能。 这里,我们将这个场景从微前端摘出来,如果在前置导航守卫中以下面这种方式使用next方法就会抛异常

router.beforeEach((to, from, next) => { if (to.path !== '/' && !to.path.includes('/target')) { // 在跳转其他路由的时候,覆盖原来的 path 添加前缀 next({ ...to, path: '/target' + to.path, replace: true, }) } else { next(false); }})

先给一下解决这个异常的方法,后文会进一步分析:

1. 降低一下vue-router的版本,使用 < 3.1.0 的版本

vue-router控制台异常:Uncaught (in promise) Error: Redirected when going from “/“ to “/foo“(vue router)

2. 使用catch捕获这个异常,在调用this.$router.push的时候catch或者传入第二个参数

this.$router.push({ path: '/foo',}).catch(err=>{})

3. 如果每次调用push方法都要catch比较麻烦, 可以重写VueRouter原型上的push方法

const originalPush = VueRouter.prototype.pushVueRouter.prototype.push = function (location, onComplete, onAbort) { if (!onComplete && !onAbort && typeof Promise !== 'undefined') { return originalPush.call(this, location, onComplete, onAbort).catch(err => { }) } else { // <router-link>进行路由跳转时,传了一个oncomplate方法 originalPush.call(this, location, onComplete, onAbort) }}

查找一下报异常的原因,网上有说这个异常,是调用push方法的时候抛出的,看一下这个push方法源码,功力不够,一眼看上去并没有发现什么端倪 注:vue-router.js的源码可以在vue-router源码的dist目录中找到

然后看一下控制台的错误,复制一部分的错误信息Redirected when going from在vue-router.js源码中搜索一下 原来这个错误是通过这个方法生成的,继续搜索createNavigationRedirectedError,这个hook会在beforeEach的时候调用,next也就是hook的第三个参数 当next传入的是路径(包含String,或者location路由对象)跳转到一个不同的路径时,就会生成这个异常,然后传递给abort方法,在abort方法中会调用onAbort方法。继续搜索confirmTransition,可以找到transitionTo方法,而$router的push方法会调用transitionTo方法,最终会定位到onAbort方法的真身在push方法中。

如果我们使用this.$router.push跳转路由,不传入onAbort方法,push方法传递给transitionTo方法的onAbort参数是promise中的reject方法。

而promise抛出了错误有没有使用catch进行捕获,就会在控制台中报异常Uncaught (in promise) Error,方法2、3的来源就是捕获promise的异常。 上面我们找到一个 < 3.1.0 版本的vue-router,看一下这个push方法,并没有使用promise,所以切换之前的版本就不会抛出异常了。

总结一下,在查找这个问题的过程中还是走了弯路,如果熟悉Promise的话,在第一步push的代码中就能发现猫腻;并且在vue-router的GitHub中issue和版本说明中也有这个控制台异常的记录,以后还是多看看GitHub能更快找到问题的根源

本文链接地址:https://www.jiuchutong.com/zhishi/287060.html 转载请保留说明!

上一篇:fetch的基本用法、请求参数及响应结果(fetchall的用法)

下一篇:fsma32.exe进程是什么文件 fsma32是什么进程

  • 360随身wifi win7系统用不了(360随身wifi 2代)(360随身wifi win7用不了)

    360随身wifi win7系统用不了(360随身wifi 2代)(360随身wifi win7用不了)

  • 微博可以找回以前取关的人吗(微博可以找回以前的私信吗)

    微博可以找回以前取关的人吗(微博可以找回以前的私信吗)

  • 以前的快手号怎样才可以重新登录(以前的快手号怎样才可以注销)

    以前的快手号怎样才可以重新登录(以前的快手号怎样才可以注销)

  • 手机里的微信分身怎么弄(手机里的微信分身安全吗)

    手机里的微信分身怎么弄(手机里的微信分身安全吗)

  • applecomrecover打不开怎么办(support.apple/iphone/restore原因)

    applecomrecover打不开怎么办(support.apple/iphone/restore原因)

  • 移动硬盘插电脑上长期不拔(移动硬盘插电脑哪个接口)

    移动硬盘插电脑上长期不拔(移动硬盘插电脑哪个接口)

  • 淘宝红包卡券在哪(淘宝红包卷在哪领)

    淘宝红包卡券在哪(淘宝红包卷在哪领)

  • div标签的作用(div标签的作用按逻辑划分)

    div标签的作用(div标签的作用按逻辑划分)

  • qq邮箱黑名单在哪查看(qq邮箱黑名单在哪里设置)

    qq邮箱黑名单在哪查看(qq邮箱黑名单在哪里设置)

  • 抖音保存本地的图标是灰色的(抖音保存本地的视频为什么不在图库)

    抖音保存本地的图标是灰色的(抖音保存本地的视频为什么不在图库)

  • 解封辅助验证有风险吗(解封辅助验证有危险吗)

    解封辅助验证有风险吗(解封辅助验证有危险吗)

  • 淘宝可以追评几次(淘宝追评几天显示)

    淘宝可以追评几次(淘宝追评几天显示)

  • 随心贴只有好友可见吗(随心贴好友有提示吗)

    随心贴只有好友可见吗(随心贴好友有提示吗)

  • 淘宝直播预告过了时间怎么办(淘宝直播间预告)

    淘宝直播预告过了时间怎么办(淘宝直播间预告)

  • 手机wps提示权限不足(手机wps文档操作权限不足)

    手机wps提示权限不足(手机wps文档操作权限不足)

  • 红米k30pro屏幕供应商(红米k30pri屏幕)

    红米k30pro屏幕供应商(红米k30pri屏幕)

  • 华为p9plus有隐私空间吗(华为p9有没有隐私空间)

    华为p9plus有隐私空间吗(华为p9有没有隐私空间)

  • iphone4怎么放手机卡(苹果四s如何)

    iphone4怎么放手机卡(苹果四s如何)

  • 安装介质是什么(安装介质不可用)

    安装介质是什么(安装介质不可用)

  • 玩快手的都签约公会吗(快手签约主播有风险吗)

    玩快手的都签约公会吗(快手签约主播有风险吗)

  • 360极速浏览器如何记住密码(360极速浏览器如何设置兼容模式)

    360极速浏览器如何记住密码(360极速浏览器如何设置兼容模式)

  • 手机屏有个圆圈是什么(手机屏有个圆圈去除)

    手机屏有个圆圈是什么(手机屏有个圆圈去除)

  • 您好您拨打的电话正在通话中(您好您拨打的电话正在通话中请稍后再拨)

    您好您拨打的电话正在通话中(您好您拨打的电话正在通话中请稍后再拨)

  • 如何防止别人蹭wifi 隐藏你的无线路由器信息的设置方法(如何防止别人蹭热点)

    如何防止别人蹭wifi 隐藏你的无线路由器信息的设置方法(如何防止别人蹭热点)

  • [error] Error: Fail to open IDE 问题解决

    [error] Error: Fail to open IDE 问题解决

  • 支付的各项税费现金流量表怎么填
  • 增值税纳税申报表模板
  • 购车发票需要认购吗
  • 股东借钱给公司,公司经营不善倒闭!借款公司要还不
  • 基金会对外捐赠未收到发票怎么入账
  • 几年前的发票能入账吗
  • 房地产企业可以贷款吗
  • 资产整体转让税收
  • 存在问题的具体表现和产生问题的原因分析
  • 上市公司股票增持是什么回事
  • 投入的资金计入什么科目
  • 材料短缺赔偿会计分录怎么写?
  • 公司注销固定资产交什么税
  • 代付其他公司货款会计分录
  • 专票和普票的税率哪个高
  • 个人转让住房交土地增值税吗
  • 非独立核算的门市部增值税
  • 外地预缴个人所得税如何入账及申报
  • 如果没有预缴就开票会怎样?
  • 建筑安装工程费用人工费计算方式
  • 公司注销后款未收完怎么办
  • 会计新手入门
  • 企业销售食品过期处罚
  • Linux系统怎么调整屏幕亮度
  • 退货应该怎么记账
  • 异地增值税预交可以网上缴纳吗
  • 住房公积金个税抵扣标准
  • 消费税和购置税怎么算
  • SSDP Discovery Service 是什么可以禁用吗
  • 以前年度多计提的附加税怎么冲回
  • 路由器和交换机用什么线连接
  • 资产评估没有发票可以吗
  • php zmq
  • php each list
  • CodeIgniter针对数据库的连接、配置及使用方法
  • 事业单位长期应付款怎么核销
  • php自动编号
  • php使用自定义函数编程求半径r的圆的周长和面积
  • 页面访问升级出错怎么办
  • 会计凭证作用的说法中不正确的是
  • 机器学习——图像分类
  • 微信小程序开发者工具
  • php如何入门
  • 客运收费标准
  • sql 覆盖索引
  • sqlcoalesce
  • phpcms不支持缩略图和水印怎么办
  • 福利费是工资的14%,这里工资是税前工资吗
  • 游戏公司不开票怎么缴税
  • 购进已经折旧提完的二手车
  • 增值税发票过了两个月怎么作废
  • 房地产企业借款利息扣除标准
  • 母公司合并子公司报表
  • 税收制度政策
  • 财务费用减少记借方还是贷方
  • 管理费用明细科目设置和核算需要注意哪些问题
  • 公司员工聚餐属于什么费用
  • 申报和做账必须一致吗
  • 固定资产不能使用了怎么处理
  • sql server如何修改表名
  • centos6.9安装教程详细
  • 线上MYSQL同步报错故障处理方法总结(必看篇)
  • microsoft window vista
  • mac怎么打开terminal
  • xp光盘安装教程
  • windowsxp怎么开机
  • windos8怎么样
  • windows8 8.1
  • win7系统鼠标指针异常
  • win10预览版21277下载
  • Linux如何使用clash
  • 移动端网页开发技术
  • 绝对给力的超经典
  • java script语言
  • jquery.form.min.js
  • js中bom是什么意思
  • 国家税务系统
  • 北京税务局地税电话
  • 营业税未达起征点
  • 建筑行业增值税税率2021
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设