Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL

最近做项目的时候,打包到 pad 上面提示这个报错,反反复复折腾了两三天,终于找到了原因,虽然这个问题不常遇到,但还是记录一下,希望能帮到大家

问题的原因在这里可以找到https://www.techiediaries.com/html5-history-api,是因为跨域,也就是有过二次跳转,因为这个是同事操作的,调用我的入口,所以我不清楚有二次跳转,最后确认是有的。

还有一个原因是我用了 vue-router 的导航守卫钩子,它的 next 方法是这样的:

ƒ (e){!1===e||r(e)?(a.ensureURL(!0),s(e)):"string"===typeof e||"object"===typeof e&&("string"===typeof e.path||"string"===typeof e.name)?(s(),"object"===typeof e&&e.replace?a.replace(e):a.push(e)):n(e)}

从代码中可以看出来如果 replace 方法存在它是优先 replace,其次才是 push,而我们一般的用法是

this.$router.push({path:'/user/login'})

这样的话相当于使用 history.pushState 方法,是可以正常使用的,也就是说这种报错只有在你碰巧使用了导航守卫钩子,然后又碰巧页面有二次跳转,就会出现了

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值