修改window.location跳转页面不生效，控制台调用却正常怎么办

你编写的跳转代码如下：

window.location = window.location.origin

出现的现象：代码中直接执行时仅会重载当前页面，无法跳转到站点根路径，控制台单独执行该代码时功能正常。

• 事件默认行为覆盖：如果跳转代码写在表单提交、a标签点击等自带默认跳转行为的事件回调中，你修改location后，事件的默认行为会再次触发当前页面的重载，覆盖你之前的跳转操作。控制台单独执行代码时不存在关联的事件默认行为，所以跳转正常。
• 后续同步逻辑覆盖：跳转代码执行后，后续还有其他同步代码修改了window.location属性、调用了location.reload()方法，或者全局的跳转拦截逻辑重置了地址。控制台单独执行时不会触发业务代码里的后续逻辑，因此不受影响。
• 单页应用(SPA)路由拦截：如果你使用的是Vue/React/Angular等框架的SPA项目，前端路由的守卫逻辑、路径监听会拦截非路由规则内的地址修改，在路由处理流程中执行的跳转逻辑会被路由逻辑拉回当前页面。控制台执行时通常不在路由处理的同步流程中，不会被拦截。

1. 阻止事件默认行为
   如果跳转逻辑在事件回调中，先调用event.preventDefault()阻止默认行为：

// 示例：表单提交回调中使用
form.addEventListener('submit', (event) => {
  // 先阻止表单默认提交行为
  event.preventDefault()
  window.location = window.location.origin
})

2. 排查后续业务逻辑
   可以在跳转代码后临时加中断逻辑测试，如果中断后跳转正常，说明后续存在修改地址的逻辑，逐行排查即可：

window.location = window.location.origin
// 临时加中断，验证后续逻辑是否有影响
throw new Error('中断后续代码执行')

3. 适配SPA项目的跳转逻辑
   可以更换更稳妥的跳转API，或者将跳转逻辑放到宏任务中避开当前的路由处理流程：

// 方案1：使用replace跳转，清除当前页面的历史记录，绕开部分路由拦截
window.location.replace(window.location.origin)

// 方案2：延迟到所有同步逻辑执行完再跳转
setTimeout(() => {
  window.location = window.location.origin
}, 0)

内容的提问来源于stack exchange，提问作者Osmar