最直接的跳转方式是赋值 window.location.href，需写全协议；需返回记录时用 location.replace()；表单提交注意 method 和编码；单页应用应使用路由库方法而非硬刷。
用 window.location.href 跳转最直接
浏览器环境里，改写 window.location.href 是最常用、最可靠的方式。它会立即触发导航，且兼容所有现代浏览器和 IE9+。
常见错误是误写成 window.location = url 或漏掉 http:// 前缀导致相对路径解析出错。比如当前页是 https://a.com/page1.html，设 window.location.href = "b.html" 会跳到 https://a.com/b.html；但设成 "//b.com" 就走协议相对路径，容易被忽略。
- 推荐显式写全协议：
window.location.href = "https://example.com/login.html" - 跳转前可加简单判断：
if (url && url.startsWith("https://")) { window.location.href = url; } - 避免在异步回调里多次赋值，否则可能触发多次跳转（尤其配合
fetch成功后跳转时）
location.replace() 不留返回记录
如果不想让用户点「返回」回到上一页（比如登录成功后跳主页、支付完成跳结果页），该用 location.replace()。它用新页面替换当前 history 条目，不新增记录。
和 href 赋值不同，replace() 不会触发页面卸载前的 beforeunload 提示，适合无数据需保存的场景。但若用户刚填了表单还没提交，又误用了 replace()，刷新就丢数据——这点常被忽略。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 正确用法：
window.location.replace("https://example.com/success.html") - 不能写成
window.location.replace = url（这是赋值，不是调用） - 服务端重定向（如 HTTP 302）无法替代它：后者由浏览器控制跳转时机，前者依赖网络响应，有延迟且不可控
表单 submit() 也能跳转，但有隐含行为
如果目标页接受 GET 参数，用表单提交比手拼 URL 更安全（自动编码特殊字符）。但默认行为是发送请求并跳转，容易和 AJAX 混淆。
典型翻车点：给表单绑了 preventDefault() 却忘了手动跳转，或者没设 method="GET" 导致发 POST 请求，目标页收不到参数。
- 最小可用结构：
<form action="/search" method="GET"> <input name="q" value="js"> <button type="submit">搜索</button> </form>
- JS 触发提交：
document.querySelector("form").submit()，注意它不校验required字段 - 不要对已提交的表单重复调用
submit()，部分浏览器会报错TypeError: Cannot submit form with no action
单页应用里别硬刷页面
用 React/Vue 等框架时，直接改 window.location.href 会强制整页刷新，破坏路由状态和组件生命周期。这时候该交由路由库处理。
比如 React Router v6 的 useNavigate()、Vue Router 的 router.push()，它们只更新 URL 和视图，不重载 DOM。硬切会导致 store 重置、未保存表单丢失、滚动位置归零。
- React 中正确做法：
const navigate = useNavigate(); navigate("/profile"); - Vue 中：
router.push({ path: "/profile", query: { tab: "settings" } }) - 服务端渲染（SSR）场景下，首次加载仍需真实跳转，但后续交互必须走前端路由
跨域跳转、下载链接、打开新标签页这些情况另算——它们不走前端路由，该用原生方式就用原生方式。跳转逻辑看似简单，真正麻烦的是边界条件：协议是否匹配、history 是否要保留、当前是否在 iframe 里、有没有 CSP 限制 navigation。这些细节一漏，就卡在 QA 阶段反复修。
