URLSearchParams是现代浏览器解析URL查询参数最简洁可靠的方式，支持自动编解码、get/getAll/has等方法，但IE不支持，需polyfill；window.location.search含开头?，可直接传入。
URLSearchParams 解析最直接，但要注意浏览器兼容性
现代浏览器里，URLSearchParams 是解析 URL 参数最干净的方式，不用自己切字符串、解码或处理重复键。它原生支持 get()、getAll()、has() 等方法，语义清晰。
在 index.html 的内联脚本或外部 JS 中可以直接用：
const params = new URLSearchParams(window.location.search);
const id = params.get('id'); // ?id=123 → '123'
const tags = params.getAll('tag'); // ?tag=a&tag=b → ['a', 'b']
注意：IE 完全不支持 URLSearchParams，如果必须兼容 IE，得用 polyfill 或手写解析函数；Chrome 49+、Firefox 44+、Safari 10.1+ 均支持。
window.location.search 返回的是带 ? 的字符串，别忘了截掉
window.location.search 拿到的是类似 ?name=张三&city=%E5%8C%97%E4%BA%AC 这样的完整查询串，开头的 ? 是包含在内的。直接传给 URLSearchParams 没问题，它会自动忽略；但如果手写解析，常见错误是没去掉 ? 就直接 .split('&')，导致第一个键名多出一个 ?。
手写 fallback 示例（仅作参考，非推荐）：
function getQueryParams() {
const search = window.location.search.substring(1); // 删掉 ?
return search.split('&').reduce((acc, pair) => {
const [k, v] = pair.split('=').map(decodeURIComponent);
acc[k] = v;
return acc;
}, {});
}
这个写法不处理重复 key、不校验格式、不支持数组语法，只适合极简场景。
参数值默认是 URL 编码的，URLSearchParams 自动 decode，手动解析时别漏掉
中文、空格、特殊符号在 URL 里都会被编码，比如 城市=北京 实际是 %E5%8C%97%E4%BA%AC。用 URLSearchParams.get() 会自动调用 decodeURIComponent，返回可读字符串；但如果你用 split + split 手动取值，必须显式调用 decodeURIComponent()，否则得到的是乱码或 %xx 字符串。
容易踩的坑包括：
- 只对 value 调用
decodeURIComponent，忘了 key 也可能含编码（虽然少见） - 没包 try/catch，遇到非法编码如
%zz会直接抛URIError - 在服务端渲染或 SSR 场景下误用
window对象（此时应由后端解析或用document.URL配合逻辑判断）
页面加载后立即读取，但注意 SPA 路由可能不触发刷新
在纯静态 index.html 中，URL 改变靠用户直接输入或 a 标签跳转，window.location.search 在页面加载时就已固定，脚本放 <script></script> 里直接执行即可。
但如果项目用了 Vue Router（history 模式）、React Router 或其他前端路由，URL 变化不会重新加载 index.html，也就不会再次执行初始化脚本。这时需要监听路由变化：
// Vue Router 示例（非 hash 模式）
router.afterEach(to => {
const params = new URLSearchParams(to.fullPath.split('?')[1] || '');
console.log(params.get('ref'));
});
更稳妥的做法是把参数读取逻辑封装成函数，在路由守卫、组件 mounted 或自定义 hook 中按需调用，而不是只依赖页面首次加载。
真正容易被忽略的是：开发时本地双击打开 file:// 协议的 index.html，window.location.search 是空字符串，且无法通过地址栏加参数生效——必须走 HTTP 服务（如 http-server、Vite 预览、Nginx）才能让查询参数被浏览器识别。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
