最推荐直接用 <a> 标签跳转，因其天然支持新标签打开、SEO 和可访问性；JS 跳转首选 window.location.href，需避免空 href、协议错误和重复赋值；关键场景用 replace() 防回退；传参务必用 URLSearchParams 编码。
直接用 <a> 标签跳转最省事
绝大多数静态导航、菜单、按钮跳转，直接写 <a href="/about.html">关于我们</a> 就够了。它天然支持右键新标签打开、复制链接、SEO 索引，还自带可访问性（screen reader 能读出链接语义）。
容易踩的坑：
-
href值为空（href=""）或href="#"会跳到页面顶部，不是“不跳转”——真要禁用跳转，得加href="javascript:void(0)"或配合event.preventDefault() - 相对路径依赖当前 URL：从
https://a.com/path/page.html写href="index.html"会跳到https://a.com/path/index.html，不是根目录 - 移动端点击
<a>有时有 300ms 延迟，但现代浏览器基本已优化掉，不用额外加touch-action: manipulation
window.location.href 是 JS 跳转的黄金标准
需要条件判断、表单校验后跳转、或响应按钮点击时，就该用 window.location.href = "https://example.com/login"。它行为和用户点链接完全一致：新增 history 记录、支持后退、触发页面卸载流程（比如 beforeunload）。
常见错误：
立即学习“前端免费学习笔记（深入）”；
- 写成
window.location = url—— 虽然多数浏览器兼容，但语义模糊，规范里没保证，别用 - 漏协议导致相对路径：比如当前页是
https://a.com，设window.location.href = "//b.com"会走协议相对，变成https://b.com；设"b.com"则变成https://a.com/b.com - 在异步回调里重复赋值：例如
fetch().then(() => { window.location.href = "/done" })，如果 fetch 多次 resolve（比如缓存未清），可能触发多次跳转
用 location.replace() 防止用户误点返回
登录成功页、支付结果页、OAuth 回调页这类“一步到位、不该回退”的场景，必须用 window.location.replace("https://example.com/success")。它会把当前 history 条目替换成新页，用户点「返回」不会回到登录表单页。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
但要注意：
- 它不触发
beforeunload，所以千万别在 replace 前让用户填了重要数据却没保存——刷新就丢光 - 不能写成
window.location.replace = url（这是赋值，不是调用函数） - 和服务端 302 重定向不同：replace 是前端立即执行，不等网络响应，更可控
参数多或含中文？别手拼 URL，用 URLSearchParams
带搜索关键词、筛选条件、ID 等参数时，硬拼 "/search?q=" + keyword 极易乱码或被截断。比如关键词是 "前端 & 面试题"，& 符号会让后端只收到 q=前端。
安全做法：
const url = new URL('/search', window.location.origin);
url.searchParams.set('q', '前端 & 面试题');
url.searchParams.set('page', '2');
window.location.href = url.toString();
这样自动编码，解码也统一，不用自己记 encodeURIComponent() 套几层。如果目标页是服务端渲染，确保后端用标准方式解析 query string（如 Node.js 的 url.parse() 或 Express 的 req.query）。
最后提醒一句：history.pushState() 看似高级，但它只是改地址栏、不真正加载新 HTML，真要跳转到另一个独立 HTML 文件，它不适用——那是 SPA 路由的事，别混用。
