最稳妥方式是用 URL 构造器生成带参 URL 后赋值给 window.location.href，它自动编码、处理分隔符；需避免手动拼接、漏编码、在非用户手势中调用 window.open。
URL 传参后直接用 window.location.href 跳转最稳妥
浏览器中打开带参数的链接，本质就是让当前页（或新页）加载那个完整 URL。最直接、兼容性最好、无副作用的方式就是赋值给 window.location.href。它会触发导航，浏览器自动解析查询参数（?key=value&foo=bar），目标页面可通过 URLSearchParams 或正则读取。
常见错误是拼错 URL 字符串：漏掉 ?、&，或参数值没做 encodeURIComponent() 编码，导致空格、中文、斜杠等被截断或报错。
- 必须对每个参数值调用
encodeURIComponent()，键名一般不用（但建议也编码） - 不要手动拼接
?和&后再赋值——容易出错；推荐用URL构造器生成 - 如果只是临时跳转（不希望用户点“返回”回到当前页），可用
window.location.replace()替代
用 URL 构造器安全拼接带参 URL
手动拼字符串极易出错，尤其参数动态生成时。用原生 URL API 是现代标准做法，自动处理编码、分隔符和基础校验。
const baseUrl = "https://example.com/page.html";
const params = { id: "123", name: "张三", tag: "前端/JavaScript" };
const url = new URL(baseUrl);
Object.entries(params).forEach(([key, value]) => {
url.searchParams.set(key, value);
});
// 最终 url.href 就是正确编码后的完整链接
console.log(url.href);
// → https://example.com/page.html?id=123&name=%E5%BC%A0%E4%B8%89&tag=%E5%89%8D%E7%AB%AF%2FJavaScript
window.location.href = url.href;
在新标签页打开需用 window.open()，且注意弹窗拦截
如果目标是新开页面而非跳转当前页，必须用 window.open(url)。但现代浏览器会拦截非用户手势（如异步回调、定时器）触发的 window.open()，表现为返回 null 且无任何提示。
立即学习“前端免费学习笔记（深入）”；
- 确保调用
window.open()在用户点击、键盘事件等同步上下文中 - 传入第二个参数（
target）可控制窗口行为，例如"_blank"或自定义名字 - 若需传递敏感参数，避免用 URL 传参（可能被日志、代理记录），改用
postMessage+iframe或服务端中转
示例：
document.getElementById("btn").addEventListener("click", () => {
const url = new URL("https://example.com/report.html");
url.searchParams.set("date", "2024-06-15");
url.searchParams.set("type", "error");
// ✅ 用户点击触发，不会被拦截
window.open(url.href, "_blank");
});
后端接收不到参数？先检查 URL 是否被重写或跳转覆盖
前端拼出的 URL 看似正确，但后端收不到参数，大概率不是前端问题，而是中间环节干扰：
- Nginx / Apache 配置了重写规则（
rewrite），把?后面全干掉了 - 前端路由库（如 Vue Router 的
history模式）劫持了 URL，未配置fallback导致 404，实际请求根本没到后端 - CDN 或网关做了 URL 规范化，过滤了某些参数名（如
utm_*）
验证方法：在浏览器地址栏**手动输入完整带参 URL**，回车后看 Network 面板里真实发出的请求 URL 是什么。如果和你拼的不一致，问题就在中间层。
URL 参数本身很简单，但嵌入真实项目后，编码、路由、代理、安全策略层层叠加，最容易忽略的是「你以为参数发出去了，其实早被某层吃掉了」。动手前，先用浏览器地址栏直输 URL 做最小验证。
