Angular应用浏览器导航重复请求资源问题排查

这是因为原生<a href>会触发浏览器默认的页面跳转行为——不管是不是SPA，浏览器都会向服务器发起对应路径的资源请求。而Angular的Router.navigate()是通过前端路由机制在单页应用内部切换组件，完全不会触发整页刷新，自然也不会请求服务器资源。

正确的导航方式 #

Angular官方推荐使用RouterLink指令替代原生a标签的href属性，写法如下：

<a routerLink="/your-target-path">跳转目标</a>

RouterLink会自动拦截a标签的点击事件，用Angular路由处理导航，不会触发服务器请求，保持SPA的单页特性。

如果特殊场景下必须保留原生a标签的href属性，需要手动阻止默认跳转行为，再调用路由导航：

<a href="/your-target-path" (click)="$event.preventDefault(); router.navigate(['/your-target-path'])">跳转目标</a>

不过这种写法冗余，优先推荐使用RouterLink。

对所有SPA框架的通用性 #

这个问题和解决方案适用于所有单页应用框架。原生a标签的默认跳转行为会破坏SPA的单页特性，导致整页刷新，各框架都提供了对应的路由链接组件来解决：

• React 使用react-router-dom中的<Link>组件
• Vue 使用vue-router中的<router-link>组件

它们的核心逻辑一致：拦截原生点击事件，阻止浏览器的页面跳转行为，改用框架自身的前端路由完成组件切换，避免向服务器重复请求资源。

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