真正的“标准路由”是浏览器原生的标签，它不依赖JS、天然支持键盘导航和屏幕阅读器，需写明确href（禁用#或空值），优先用绝对路径，新窗口须加rel="noopener noreferrer"，锚点跳转需配合scroll-behavior: smooth和tabindex="-1"确保可访问性。
用 <a> 标签做跳转才是真正的“标准路由”
浏览器原生的 <a> 标签就是 HTML 的标准路由机制，它不依赖 JS、不破坏 history、天然支持键盘导航和屏幕阅读器。只要 href 有效，点击、回车、空格、Tab 切换都能触发跳转。
- 必须写明确的
href值：不能是href="#"或href=""，否则会滚动到顶部或刷新当前页 - 目标路径优先用绝对路径（如
/products），避免相对路径引发的路径错乱（user/profile和/user/profile行为完全不同） - 新窗口打开时，必须加
rel="noopener noreferrer"，否则存在安全漏洞和内存泄漏风险 - 锚点跳转（如
href="#faq"）不是页面跳转，只是滚动；若目标元素缺失，浏览器静默失败，无任何提示
跳转链接必须能被键盘用户完整操作
可点击 ≠ 可访问。一个合格的跳转链接要满足三件事：能被 Tab 键聚焦、按 Enter/Space 触发、有清晰的焦点样式。
-
<a href="/contact">联系我们</a>默认就满足，别手动加tabindex="0" - 别用
<div onclick="location.href='...'">模拟链接——它不可聚焦、无语义、屏幕阅读器读不出目的 - 给
:focus-visible写显式样式（比如outline: 2px solid #007bff;），别依赖浏览器默认轮廓线（很多系统会关掉） - 如果跳转后目标区域需要聚焦（比如跳到
<section id="contact">），建议 JS 补一句document.getElementById("contact")?.focus()，否则键盘用户可能卡在顶部
为什么不要用 window.location.href 替代 <a> 做常规导航
window.location.href 是程序控制跳转的工具，不是导航替代品。滥用它会让页面失去基本可访问性能力。
- 它绕过浏览器原生导航流程：不支持右键「在新标签页打开」、无法复制链接、SEO 不索引、屏幕阅读器无法预读目标地址
- 在事件处理里混用（比如
<a onclick="jump(); return false;">）容易漏掉event.preventDefault()，导致跳转两次 - 移动端长按链接唤出菜单（复制、分享、新标签打开）的功能完全失效
- 如果真要条件跳转（例如登录后根据角色跳不同页），也应先用
<a>渲染基础链接，再用 JS 动态改href，而不是删掉标签硬上 JS
锚点跳转要配 scroll-behavior: smooth 和可聚焦目标
href="#about" 这类跳转常被误认为“简单”，但实际最容易出体验断层。
立即学习“前端免费学习笔记（深入）”；
- 目标元素（如
<div id="about">）必须存在，且最好加tabindex="-1"，确保跳转后能被键盘聚焦 - CSS 中全局启用平滑滚动：
html { scroll-behavior: smooth; }，比 JS 的scrollIntoView()更轻量、更可靠 - 避免用
javascript:void(0)或空href实现“假跳转”——这会让键盘用户彻底无法使用该链接 - 单页应用中慎用手动改
location.hash，很可能与 React Router / Vue Router 的 hash 模式冲突，造成路由状态错乱
真正难的不是让页面跳过去，而是让所有人——不管用鼠标、键盘、触屏还是读屏软件——都能一致、可靠、可预期地到达目标。这点上，<a> 标签仍是唯一经过三十年验证的标准答案。
