核心是实现组件内响应式变量与url查询参数双向同步：变量变则url自动更新，url变（含手动输入或浏览器导航）则变量自动同步，不依赖全局状态或直接操作location，通过customref封装轻量级同步逻辑，适用于搜索词、分页等场景。
核心是让组件内响应式变量与 URL 查询参数保持双向联动：变量改，URL 自动更新；URL 改（包括手动输入、前进/后退），变量也自动同步。不依赖全局状态，也不直接操作 location。
用 customRef 封装轻量级查询参数同步
适合搜索词、分页页码、筛选开关等场景，无需 Vue Router 也能工作。
- 读取时调用 track() 告诉 Vue 这个值会被依赖，再从
URLSearchParams取值，例如searchParams.get('q') || '' - 写入时先用
searchParams.set()或append()修改参数，再用history.replaceState()更新地址栏（避免新增历史记录） - 必须监听
popstate事件——用户点浏览器前进/后退时，URL 变了但不会触发 set，需手动调用 trigger() 通知更新
用 Vue Router 监听并响应 query 变化
当页面逻辑已基于 Vue Router 构建，这是更自然、更健壮的选择。
- 在
setup中用useRoute()获取路由对象，对route.query.page或route.query.category单独 watch，避免监听整个 route 引发冗余计算 - 若需转为组件内 ref，可用
ref(route.query.xxx)初始化，再在 watch 回调中更新它 - 提交变更时统一用
router.push({ query: { ... } })，确保 history 记录完整且可回溯
处理多值与类型转换细节
URL 参数本质是字符串，但业务常需数组或布尔值，必须主动解析和校验。
-
getAll('tag')返回 string[]，get('active')返回 string，不能直接当 boolean 用 - 建议封装一个解析函数，例如：
const isActive = route.query.active === 'true'或const tags = route.query.tag?.split(',') || [] - 提交前做反向序列化：布尔值转
'true'/'false'，数组转join(',')或多次append，保持语义清晰
避免破坏响应链的典型错误
有些写法看似快捷，实则切断了 Vue 的响应机制。
- 不要直接赋值
window.location.search或拼接location.href——Vue 完全无感知，状态立即脱节 - 不要只在组件初始化时读一次 URL 参数——后续修改不会触发更新
- 不要把 URL 参数存进 Vuex/Pinia——URL 状态应由路由系统或专用 hook 承担，否则职责混杂、调试困难
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
