位置: 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是什么进程

  • 什么是价税分离?
  • 税会差异产生的原因
  • 本月累计专项扣款怎么算
  • 机器维修费属于变动成本吗
  • 个人所得税累计收入
  • 进料加工余料结转可以跨年吗
  • 小规模企业所得税税率多少
  • 印刷宣传册是违法吗
  • 将固定资产转给母公司属于债务重组吗
  • 资本公积是企业所得税吗
  • 认缴出资股权转让的法律责任
  • 核定征收企业注销后安全吗
  • 社保上面的每月的缴费基数是什么意思?
  • 奖励给优质供应商会计处理怎么做?
  • 无形资产研究费用计入成本么
  • 销售无形资产增值税纳税义务发生时间
  • 个体工商户税收标准2023年
  • 关于330技术维护费
  • 金税盘不能清卡是啥原因
  • 单位为员工缴纳社保分录
  • 金税盘点了没反应
  • 没有成立工会的企业要交工会筹备金吗
  • 当月认证失控发票怎么做账处理?
  • 去年的企业所得税
  • 超市库存商品分为哪几类
  • 工会经费计税依据是应发还是实发
  • 补缴社保滞纳金怎么做账
  • 中级会计考试考后审核需要什么资料
  • 如何增强无线网卡的接收能力
  • js监听地址栏
  • PHP:stream_context_set_option()的用法_Stream函数
  • 强化税收风险意识
  • 怎么查发票的真假鉴定
  • 企业常用的消毒措施有
  • php遍历结果集
  • 事业单位长期应付款挂账处理规定
  • 应收账款项目在资产负债表怎么填列
  • 资产类备抵科目借方是加还是减
  • 用库存现金支付装卸费
  • 资本公积属于谁
  • 商业银行流动性风险监管指标
  • 税控盘开具增值税专用发票步骤
  • 异地提供建筑服务预缴
  • 公司购买办公楼需要缴纳城镇土地使用税吗
  • 营业总收入包括营业外收入吗
  • sql已成功与服务器建立连接但登录中发生错误
  • mysql数据库导出xml的实现方法
  • 进项税大于销项税怎么抵扣
  • 个贷系统平账专户a户为啥扣钱
  • 小规模纳税人专票税率是多少
  • 软件研发的整个流程
  • 分期付款服务费是什么
  • 售出货物
  • 咨询费收入怎么入账
  • 长期股权投资损益调整是什么意思
  • 个人付款开了公章怎么办
  • 对于资产负债表日后的非调整事项
  • 外贸整个流程图
  • docker基础教程
  • windows8.
  • ubuntu14.04下apt-get install的报错以及解决方法
  • 苹果怎么格式化彻底
  • win8.1使用
  • cortanawin10在哪
  • win7旗舰版升级win10教程
  • Unity3D-SLua+ProtocolBuffers构建说明
  • 通过手机号怎么查对方的位置
  • jquery动画库
  • k-means聚类算法例题
  • javascript中怎么创建一个数组
  • javascript中的判断语句
  • 设计师的悲哀
  • 批处理循环执行批处理
  • android基础入门教程
  • 甘肃职称申报评审入口官网
  • 银行赠送礼品活动方案
  • 核定征收怎么计算税额
  • 银行收取个人贷款的费用
  • 消费税征税环节
  • 船舶税由谁代征
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设