Object.fromEntries 与 URLSearchParams 可实现 URL 参数与组件状态双向同步：解析 URL 初始化状态，状态变更时用 replaceState 更新 URL，监听 popstate 响应导航，并通过封装函数处理字符串转数字/布尔/数组等类型转换。
用 Object.fromEntries 和 URLSearchParams 同步 URL 参数与组件本地状态，是现代前端开发中轻量、无依赖的同构方案。核心思路是：URL 是可序列化的单一数据源，状态只是它的镜像；两者通过解析 ↔ 序列化双向绑定。
从 URL 读取参数并初始化状态
页面加载时，直接从当前 URL 解析参数，转为对象赋值给响应式状态（如 React 的 useState、Vue 的 ref 或纯 JS 对象）：
const params = new URLSearchParams(window.location.search);
const initialState = Object.fromEntries(params); // 自动解码 key/value
// → { q: 'hello world', page: '2', sort: 'desc' }
注意：Object.fromEntries 会自动对 URL 编码值做 decodeURIComponent，无需手动处理空格、中文等。
状态变更时实时更新 URL（不刷新页面）
每当本地状态变化，构造新的参数对象，用 Object.entries 转回键值对，再交由 URLSearchParams 序列化：
function updateUrl(newParams) {
const searchParams = new URLSearchParams(newParams);
const newUrl = `${window.location.pathname}?${searchParams}`;
window.history.replaceState(null, '', newUrl);
}
// 示例：更新搜索关键词和页码
updateUrl({ q: 'react hooks', page: '1' });
// → /search?q=react+hooks&page=1
推荐用 replaceState 避免污染历史栈；若需前进/后退支持，改用 pushState 并监听 popstate。
监听浏览器导航（后退/前进）并同步状态
用户点击浏览器前后按钮时，URL 改变但页面未刷新，需主动监听并反向同步：
- 在组件挂载或初始化时添加
popstate监听器 - 在监听器中重新读取
window.location.search，解析为对象 - 用新参数对象触发状态更新（例如调用
setState或赋值ref.value）
这样就形成了完整的闭环：URL ⇄ 状态 ⇄ URL。
处理类型转换与默认值（避免字符串陷阱）
URLSearchParams 所有值都是字符串，而实际业务中常需数字、布尔或数组。建议封装一个带类型推导的解析函数：
function parseQuery(searchString) {
const params = new URLSearchParams(searchString);
return Object.fromEntries(
Array.from(params.entries()).map(([k, v]) => {
if (v === 'true') return [k, true];
if (v === 'false') return [k, false];
if (/^\d+$/.test(v)) return [k, Number(v)];
if (k.endsWith('[]') && v.includes(',')) {
return [k.replace('[]', ''), v.split(',')];
}
return [k, v];
})
);
}
例如：?page=3&active=true&tags=vue,react → { page: 3, active: true, tags: ['vue','react'] }。
