RouterLink无需包裹锚标签即可生效，这样使用是否安全合规？

很棒的问题！我在Angular路由项目里经常碰到这类场景，下面给你拆解一下关于在<div>、<mat-card>、<mat-title>这类元素上使用routerLink的各个要点。

是否可行？ #

完全可行！Angular的routerLink是一个属性指令，这意味着它可以应用在任何HTML元素上，而不只是<a>标签。当你给非锚点元素添加routerLink时，Angular会自动绑定点击事件来处理导航。举个例子：

<div routerLink="/dashboard">前往控制台</div>
<mat-card routerLink="/product/456">查看商品详情</mat-card>

这些代码都能正常实现导航功能。

是否安全？ #

从Angular的技术安全角度来说，是安全的——只要你使用可信的路由路径（避免绑定未过滤的用户输入到routerLink），在非锚点元素上使用routerLink不会引入XSS这类固有风险。真正需要关注的“安全”问题其实是可访问性（a11y），这也是我们后面要重点讲的部分。

必须搭配锚标签使用吗？ #

不是必须，但非常推荐在多数场景下使用<a>标签搭配routerLink，原因如下：

• <a>标签自带语义化属性：屏幕阅读器会识别它为链接，键盘用户也能自然地通过Tab键聚焦到它。
• 默认浏览器行为：右键点击<a>标签会弹出“在新标签页打开”“复制链接地址”等选项——这些都是用户对可导航元素的预期行为。
• 额外工作量少：你不需要手动添加可访问性属性或键盘事件处理器。

使用非锚点元素的潜在问题 #

如果你选择在非<a>元素上使用routerLink，很可能会遇到这些问题：

• 可访问性缺陷：屏幕阅读器用户无法识别该元素是可导航链接，键盘用户默认无法聚焦或通过回车键/空格键激活它。
• 违背用户习惯：用户不会直觉地右键点击<div>来在新标签页打开链接，这会损害易用性。
• 额外样式工作：你需要添加自定义样式（比如cursor: pointer、hover效果）来提示用户该元素可点击——而<a>标签默认就具备这些样式。

如果因为特殊布局需求必须使用非锚点元素，一定要通过以下方式修复这些问题：

<div 
  routerLink="/about"
  tabindex="0"
  role="link"
  (keyup.enter)="$event.target.click()"
  (keyup.space)="$event.target.click()"
  style="cursor: pointer;"
>
  关于我们
</div>

这段代码让元素可以被聚焦、具备链接的语义化属性，并且支持键盘操作。

总结 #

从功能层面来说，routerLink可以在任何元素上正常工作。但为了可访问性和用户体验，只要有可能，就尽量使用<a routerLink="...">。只有在无法使用<a>标签的边缘场景下，再考虑用其他元素，并且一定要补全可访问性属性，确保所有用户都能正常使用。

内容的提问来源于stack exchange，提问作者CodeHip