data-*属性仅存静态字符串，无法响应url变化，必须用urlsearchparams解析location.search并手动同步到dom。
data-* 属性不能保存地址参数——它只存静态字符串，且页面刷新后不会自动更新，更无法响应 URL 变化。真要让 HTML 元素“记住”当前 URL 参数并动态生效，必须靠 JavaScript 读取 location.search，再手动写入或匹配 DOM。
为什么 data-* 不能直接当 URL 参数用
常见错误现象：data-id="123" 写死在 HTML 里，但用户访问的是 ?id=456，页面却还是显示 123；或者 JS 修改了 element.dataset.id = "456"，但后续 CSS 选择器 [data-id="456"] 不生效。
-
data-*是初始值快照，不是响应式绑定，它不监听 URL 变化 - dataset 赋值不会触发 DOM 属性同步，
getAttribute("data-id")仍返回旧值 - URL 参数是运行时状态，
data-*是编译时标记，二者生命周期完全不同 - 想让导航项随 URL 高亮？得用
window.location.pathname或URLSearchParams实时解析，而不是依赖 data-target 的静态值
URL 参数怎么安全读取并写进 data-*
必须用 URLSearchParams 解析，不能手撕 location.search 字符串——它不处理编码、重复键、空值等边界情况。
- 获取参数：const params = new URLSearchParams(window.location.search); const id = params.get("id") || ""
- 写入 DOM：document.body.setAttribute("data-current-id", id)（别用
dataset.currentId = id，否则getAttribute读不到） - 若需存结构化数据（如
?config={"theme":"dark"}），先decodeURIComponent再JSON.parse，且必须包try/catch - 注意：中文或特殊字符会 URL 编码，
params.get("q")自动解码，不用额外处理
data-* 命名和读取最容易踩的坑
命名不合规、读法错配，是 80% 的 “取不到值” 问题根源。
- HTML 中只能写全小写+连字符：
data-user-id✅，data-userId❌，data_USER_ID❌ - JS 中读取含数字的属性（如
data-2024-id）必须用方括号：el.dataset["2024Id"]，不能写el.dataset.2024Id（语法错误） - 最稳读法永远是
el.getAttribute("data-user-id")，它不转换、不静默失败、不丢原始字符串 - 判断布尔语义别用
if (el.dataset.active)——data-active="false"也会为真，应写el.getAttribute("data-active") === "true"
什么场景下该放弃 data-* 改用 URL 参数
只要涉及“页面跳转后还要保持状态”，data-* 就不该是首选。
- 分页列表点击第 3 页 → 跳转后 URL 带
?page=3，接收页靠URLSearchParams读，而不是靠data-page="3"硬编码 - 主题切换后刷新页面仍保持暗色模式 → 存
localStorage或服务端 session，不是靠data-theme="dark"记在 HTML 里 - 表单提交用
method="GET"，天然生成带参 URL，后端/前端都可直接解析，无需中间塞 data-* - SEO 友好或无 JS 环境降级时，URL 参数是唯一能被爬虫和服务器端渲染识别的传递方式
真正难的不是怎么写 data-*，而是分清哪些该让它管（组件类型标识、CSS 钩子）、哪些必须交给 URL 或存储机制——混淆这两层，后面所有“动态”逻辑都会卡在第一次刷新上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
