最直接的跳转方式是赋值 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()，刷新就丢数据——这点常被忽略。
立即学习“前端免费学习笔记（深入）”；
1、数据调用该功能使界面与程序分离实施变得更加容易，美工无需任何编程基础即可完成数据调用操作。2、交互设计该功能可以方便的为栏目提供个性化性息功能及交互功能，为产品栏目添加产品颜色尺寸等属性或简单的留言和订单功能无需另外开发模块。3、静态生成触发式静态生成。4、友好URL设置网页路径变得更加友好5、多语言设计1)UTF8国际编码; 2)理论上可以承担一个任意多语言的网站版本。6、缓存机制减轻服务器
- 正确用法：
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 阶段反复修。
