data-*属性仅存储跳转地址，需JavaScript读取并执行window.location.href等跳转逻辑，不可自动触发；命名推荐data-target-url，值须为合法URL且校验格式与安全性。
data-* 属性怎么存跳转地址
HTML5 的 data-* 属性本身不触发跳转，它只是静态容器，用来存你后续要用的数据。想“动态定目标”，必须配合 JavaScript 读取并执行跳转逻辑。
常见错误是直接写 点击，但不写 JS，点了毫无反应——data-url 不会自动变成 href 值。
- 推荐用语义清晰的命名，比如
data-target-url或data-href，避免和原生属性冲突 - 值必须是合法 URL 字符串，注意编码：含中文或空格时建议先
encodeURIComponent()处理再存入 - 不要在
data-属性里塞复杂结构（如 JSON 字符串），除非你明确要解析它；简单跳转只存纯 URL 最稳
用 JavaScript 读取并跳转的最小可行写法
核心就三步：选中元素 → 取 dataset 值 → 调用 window.location.href 或 location.assign()。
示例（内联事件，适合快速验证）：
立即学习“前端免费学习笔记（深入）”；
跳转
更推荐分离行为（绑定事件监听器）：
document.querySelectorAll('[data-target-url]').forEach(el => {
el.addEventListener('click', function(e) {
e.preventDefault();
const url = this.dataset.targetUrl;
if (url && /^https?:\/\//.test(url)) {
window.location.href = url;
}
});
});-
this.dataset.targetUrl自动把data-target-url转成驼峰形式，注意大小写对应 - 务必加
e.preventDefault()，否则默认行为可能干扰跳转 - URL 校验很重要：未校验的
data-target-url="javascript:alert(1)"是 XSS 风险点
跳转方式选 window.location.href 还是 location.replace()
- 用
window.location.href = url：会留下当前页，用户点返回能回到原页面 - 用
location.replace(url)：替换当前记录，无法返回，适合“提交后跳结果页”这类场景 - 如果目标是新窗口，别忘了加
target="_blank"并配rel="noopener"防安全漏洞
容易被忽略的兼容性与陷阱
dataset 在 IE11+ 支持良好，但 IE10 及以下不支持，若需兼容老环境，得改用 getAttribute('data-target-url')。
另一个高频坑是：多个元素共用同一 class，但部分没写 data-target-url，JS 读出来是 undefined，直接赋值会跳到 about:blank 或报错。
- 永远对
this.dataset.xxx做存在性和格式判断，别信 HTML 写得一定对 - 服务端渲染时若 URL 含变量，确保变量已正确转义，避免生成非法 HTML 属性值
- 单页应用（SPA）中，直接改
location.href会整页刷新，应优先用路由实例的push()或replace()方法
真正灵活的不是 data 属性本身，而是你怎么把它和跳转时机、目标判断、错误兜底串成一条可控链路。属性只是起点，后面每一步漏校验，都可能让“动态”变成“不可控”。
