window.location.href 是最可靠的方式，读写皆支持且原生兼容；document.url 和 location.tostring() 各有局限；修改 search/hash 需整体替换或 history api；推荐 urlsearchparams 解析参数；跳转前上报用 fetch(..., {keepalive: true}) 或 navigator.sendbeacon()。
直接读写 window.location.href 是最可靠的方式
它返回当前地址栏中显示的完整 URL 字符串，赋值即触发跳转，不依赖任何库，所有现代浏览器原生支持。比如访问 https://example.com:3000/path?a=1#top 时，window.location.href 的值就是这个字符串。
注意：window.location.href 是唯一既能读又能写的单点入口；document.URL 只读，且在某些 iframe 场景下可能返回父页面 URL；location.toString() 虽然值相同，但语义模糊、不支持赋值。
- 读取时直接用
window.location.href，不用加括号或调用函数 - 设置新地址时，传入完整 URL 或相对路径（如
"./about.html"、"#footer"）都可被正确解析 - 避免拼接修改：不要写
window.location.href += "?t=" + Date.now()，容易破坏原有hash或search，应改用new URL()构造器处理
window.location.search 和 window.location.hash 不能直接赋值
这两个属性是只读字符串，不是对象。比如 window.location.search 返回 "?id=123&tab=info"，但你不能通过 window.location.search = "?x=1" 来修改——这会抛出 TypeError。
真正生效的改法只有两种：
- 整体替换：
window.location.href = new URL(window.location.href).origin + window.location.pathname + "?x=1" - 用历史 API：
history.replaceState(null, "", "?x=1")（不刷新，但需手动维护 state）
同理，window.location.hash = "top" 不会生效，必须带 #：window.location.hash = "#top" 才能滚动到对应元素。
提取查询参数别手动切字符串，优先用 URLSearchParams
很多人用 location.search.substr(1).split("&") 再遍历解析，既易错又难维护。现代浏览器都支持 URLSearchParams，它是专为 query string 设计的接口。
示例：
const params = new URLSearchParams(window.location.search);
console.log(params.get("id")); // "123"
console.log(params.has("tab")); // true
params.set("t", Date.now()); // 修改后仍需更新 href 或 history
注意：URLSearchParams 不会自动同步到 URL，只是个内存对象；要反映到地址栏，还得配合 window.location.href 或 history.pushState()。
跳转前发请求，window.location.href 赋值后 JS 几乎立即中断
给 window.location.href 赋新值后，页面进入卸载阶段，后续脚本基本不会执行。所以像这样的代码：
window.location.href = "https://newpage.com";
console.log("这行不会打印"); // ✅ 确实不会
如果需要跳转前上报数据，必须用同步方式：
-
fetch(url, { method: "POST", keepalive: true })—— 支持跨浏览器，但仅限简单请求 -
navigator.sendBeacon(url, data)—— 更可靠，适合日志类小数据，但只支持 POST + text/plain 或 ArrayBuffer
调试时记得在 DevTools Network 面板勾选 “Preserve log”，否则跳转后控制台清空，看不到失败请求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
