location.href 触发同步导航，立即卸载当前页并中止 JS 执行；支持相对/绝对/完整 URL，但跨域跳转可能静默失败或报安全错误；无法控制历史记录与标签页复用，替代方案包括 location.replace()（替换当前 history 条目）和 history.pushState()（仅更新 URL，不加载新页面）。
location.href 能跳转页面，但不是所有场景都该用它——它会中断当前页面生命周期，且无法控制跳转方式（比如是否复用标签页、是否保留历史记录）。
直接赋值 location.href 的行为和限制
给 location.href 赋新 URL 会立即触发**同步导航**，等价于用户点击一个链接。页面会卸载，当前 JS 执行被中止，未完成的 fetch、定时器、动画都会被丢弃。
- 支持相对路径（如
"./detail.html"）、绝对路径（"/admin/list"）、完整 URL（"https://example.com/login"） - 不支持跨域跳转时抛出安全错误（
DOMException: Blocked a frame with origin ...），但多数情况是静默失败 - 无法阻止浏览器后退按钮回到上一页（即它写入 history stack）
- 在 iframe 内使用时，默认作用于该 iframe；加
window.top.location.href = ...才能跳转顶层窗口
替代方案：什么时候该用 location.replace()
当不想让用户通过“后退”回到当前页时（例如登录成功后跳首页、表单提交后跳结果页），location.replace() 更合适——它用新页面替换当前 history 条目，不新增记录。
-
location.href = "/success"→ 用户点后退会回到表单页 -
location.replace("/success")→ 用户点后退直接跳出当前站点或到上一个非本跳转页 - 两者都不支持传参，URL 参数仍需拼在路径里（
location.replace("/user?id=123")）
更可控的跳转：用 history.pushState() + location.href 组合
纯前端路由（如 Vue Router、React Router）底层依赖 history.pushState() 实现无刷新跳转，但它**不会真正加载新 HTML**。若你既要更新 URL 又要加载新页面，不能只靠 pushState。
立即学习“前端免费学习笔记（深入）”；
- 仅调用
history.pushState({}, "", "/new-page")→ 地址栏变，页面不变，适合 SPA 内部切换 - 想真实跳转且保留 history 记录？老老实实用
location.href，pushState 不适用 - 服务端渲染（SSR）或静态站点中，
location.href是最直接可靠的跳转方式
容易忽略的细节：协议、编码与移动端兼容性
看似简单的字符串赋值，实际踩坑不少：
- 中文路径必须
encodeURIComponent()，否则可能被截断或报错：location.href = "/search?q=" + encodeURIComponent("前端路由") - 协议缺失时（如写成
"//google.com"），会继承当前页协议；但写成"google.com"（无协议无斜杠）会被当成相对路径，跳转到http://current-domain.com/google.com - iOS Safari 对
location.href在某些异步回调中（如 setTimeout、fetch.then）有延迟或拦截，建议优先在用户交互事件（click、submit）中触发
真正要注意的不是“怎么写”，而是“在哪写、为什么写、写了之后 JS 还有没有机会执行”。跳转是页面级操作，一旦触发，就别指望后面的代码还能跑完。
