最直接的跳转方式是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() 替换当前历史记录项，而不是新增一条。
制作简单的响应式幻灯片
下载
本站介绍了很多 jQuery 幻灯片插件，它们都很优秀，且功能强大，应用在中大型页面上很合适。但如果你的页面很简单，只想要一个简单纯粹的幻灯片效果，这些插件可能略显臃肿。今天我们不用任何插件，写一个简单的响应式幻灯片。
- 用户点浏览器后退按钮，会跳到上上个页面，而不是刚离开的这个
- 和
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。
