html如何从一个页面跳到另一个页面

最直接的跳转方式是window.location.href，立即卸载当前页并加载新url；标签更安全且语义化；window.location.replace()可避免返回记录；spa中应使用框架路由api而非直接操作location。

用 window.location.href 跳转最直接

浏览器环境里，改写 window.location.href 是最常用、最可靠的跳转方式。它会立即触发页面卸载，加载新 URL，行为和用户点击链接完全一致。

• 适合所有现代浏览器，包括 IE9+
• 支持相对路径（"./page.html"）、绝对路径（"/admin/list"）、完整 URL（"https://example.com/login"）
• 如果目标页需要带参数，拼 query 字符串就行，比如 window.location.href = "/search?q=js&sort=date"
• 注意：不要在异步回调里盲目赋值，比如 fetch().then(() => window.location.href = "...")，若请求失败或被拦截，跳转就静默消失了

用 <a></a> 标签跳转更安全

纯前端跳转，优先考虑语义化标签。一个带 href 的 <a></a> 标签天然支持右键新标签打开、中键滚动、无障碍阅读器识别，还不会被 JS 错误阻断。

• 不需要 JS 就能工作，降级友好；JS 加载失败或被禁用时仍可用
• 想模拟点击？用 document.querySelector("a#login").click()，但别滥用——它会触发默认行为，可能意外打开新标签（取决于 target）
• 避免写 <a href="#" onclick="window.location.href='...'"></a>，这种写法破坏了语义，且 # 会让地址栏多出哈希，刷新后可能卡在错误位置

window.location.replace() 不留返回记录

当不希望用户点「返回」回到当前页时（比如登录成功后跳首页、表单提交后跳结果页），用 window.location.replace() 替换当前历史记录项，而不是新增一条。

• 用户点浏览器后退按钮，会跳到上上个页面，而不是刚离开的这个
• 和 href 赋值一样支持各种路径格式，但不会在 history 中留下痕迹
• 常见误用：在表单 onsubmit 里先 replace() 再 return false，其实只要 replace() 执行了，页面立刻跳走，后续 return 已无意义

SPA 里别直接操作 location

如果你用的是 React、Vue 或其他单页应用框架，页面“跳转”实际是路由系统接管的内部状态变更。直接改 window.location.href 会导致整个应用重载，丢失当前组件状态、Redux store、已缓存的数据。

立即学习“前端免费学习笔记（深入）”；

• React router 用 useNavigate()（v6+）或 history.push()（v5）
• Vue Router 用 router.push()
• 强行绕过路由系统跳转，轻则白屏，重则触发重复初始化、接口重发、内存泄漏

真正难的不是怎么跳，而是分清当前是不是 SPA 环境——很多 bug 都源于在 Vue 项目里写了 window.location.href = "/user"，结果路由没注册，404 直接报给 nginx。