<area> 标签不支持 SPA 无刷新路由，必须用 onclick 拦截默认行为并手动调用 router.push 或 navigate；其 href 会强制整页刷新，且 coords 不适配缩放、参数拼接易出错，需全面兜底处理。
<area> 标签本身不支持单页应用（SPA）所需的无刷新路由跳转，它只能触发整页导航或执行 JavaScript；想让它配合前端路由，必须手动拦截默认行为并调用框架路由方法或 history.pushState。
area 的 href 会强制整页刷新，无法直接对接 Vue/React 路由
即使你把 <area href="/user"> 写在 SPA 页面里，点击后浏览器仍会向服务器发起 GET 请求，导致整个页面重载——这和 <a href="/user"> 行为一致，完全绕过前端路由系统。
- Vue Router / React Router 的
router.push或navigate不会被自动触发 - 服务端若未配置 fallback（如所有非 API 路径返回
index.html），直接 404 - 就算服务端 fallback 正确，页面也会闪一下再渲染，破坏 SPA 的平滑体验
必须用 onclick + preventDefault + 手动路由跳转
要让 <area> 真正适配 SPA，得放弃 href 导航，改用内联 onclick 并显式阻止默认行为：
<map name="nav-map">
<area shape="rect" coords="0,0,100,50"
onclick="event.preventDefault(); router.push('/dashboard')"
alt="Dashboard">
</map>
- Vue 3 setup 中需确保
router已通过useRouter()获取并可访问（不能在模板中直接调用） - React 中同理，
useNavigate()必须在组件作用域内调用，不能写在全局 onclick 字符串里——推荐绑定到 ref 或用事件委托 - 避免写
href="javascript:void(0)"后再监听 click：多一层 DOM 查找，且无法触发路由守卫（如权限校验）
coords 缩放失准 + 路由参数拼接易出错
<area> 的 coords 是像素坐标，不随图片缩放自适应；若图片用 width/height 或 CSS 缩放，热点区域就会偏移。同时，带参数的跳转（如 /user/123）若靠字符串拼接，极易漏判空值或注入非法字符：
立即学习“前端免费学习笔记（深入）”；
- 动态 ID 必须提前校验：
if (id && /^\d+$/.test(id)) { router.push(`/user/${id}`) } - 查询参数务必用
URLSearchParams构造，别手拼?q=前端&sort=date—— 中文会乱码 - 移动端热区建议 ≥44px，否则点击不灵敏；
coords值需按实际渲染尺寸换算，不能照搬设计稿像素
真正难的不是写那行 router.push，而是保证 <area> 在不同设备缩放、不同路由嵌套深度、不同权限状态下，既点得准，又跳得对，还不触发意外刷新——这些细节全得自己兜底。
