Angular中如何实现可被爬虫抓取的链接且不触发页面刷新？

可以通过给a标签添加真实href属性+阻止默认跳转行为的方式解决，既让爬虫能识别链接，又能保留自定义逻辑和单页应用的无刷新体验：

步骤1：修改HTML模板 #

给<a>标签绑定href属性，同时在click事件中传入$event对象，用于后续阻止默认行为：

<ul>
  <li *ngFor="let product of products">
    <a [href]="product.url" (click)="navigateToPage($event, product.url)">{{product.name}}</a>
  </li>
</ul>

步骤2：更新TS中的导航函数 #

在navigateToPage里先阻止浏览器默认的页面刷新跳转，再执行你的额外逻辑，最后调用Angular路由导航：

navigateToPage(event: Event, url: string) {
  // 阻止浏览器默认跳转（避免页面刷新）
  event.preventDefault();

  // 这里写你的额外逻辑（比如埋点统计、权限校验等）
  // --- 原额外逻辑代码放在这里 ---

  // 执行Angular单页路由导航
  this.router.navigate([url]);
}

为什么这个方案可行？ #

• 爬虫会读取<a>标签的href属性，能正常抓取到链接地址和对应内容；
• 点击时通过event.preventDefault()拦截了浏览器的默认跳转行为，不会触发页面刷新；
• 完全保留了navigateToPage中的自定义逻辑，满足业务需求；
• 依赖Angular自身的路由机制，符合单页应用的跳转逻辑。

注意：确保product.url对应的路由已经在Angular的RouterModule中正确配置，否则router.navigate无法正常跳转。

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