Angular锚点滚动与通配符路由**冲突跳转404如何解决

冲突来自两个配置的逻辑叠加：

1. 你开启了useHash: true哈希路由模式，该模式会占用URL中的#作为路由前缀标识，URL结构为域名/#/路由路径，和原生锚点域名/路由路径#锚点名的#位置规则存在差异。
2. 你写的<a href="#etat"></a>是原生锚点写法，在哈希路由模式下会被Angular路由解析为路径为etat的路由请求，而非当前页锚点跳转。此时子路由中配置的path: '**'通配符规则会匹配到etat这个不存在的路由，直接重定向到/page-not-found页面，锚点滚动逻辑根本不会触发。

选择任意一种即可，优先推荐第一种：

• 方案1：使用Angular路由规范的锚点写法
  不要直接写原生href="#xxx"，改用RouterLink指令明确指定锚点片段，路由会自动适配哈希模式生成正确URL，不会把锚点识别为路由路径：

  <!-- 错误写法 -->
  <a href="#etat"></a>
  
  <!-- 正确写法：指向当前路由，绑定fragment参数为锚点id -->
  <a routerLink="./" fragment="etat">跳转到etat锚点</a>
  

  该写法生成的URL格式为/#/当前路由路径#etat，Angular会自动识别第二个#后的内容为锚点，正常触发滚动逻辑，不会进入404规则。

• 方案2：修正路由配置兼容原生锚点写法（仅Angular 11+版本适用）
  在根路由RouterModule.forRoot的配置中补充参数，修正相对链接解析逻辑：

  RouterModule.forRoot(routes, {
    useHash: true,
    anchorScrolling: 'enabled',
    scrollOffset: [0, 64],
    relativeLinkResolution: 'corrected' // 新增该行
  })
  

  同时把子路由中通配符路由的绝对重定向改为相对重定向，避免吞掉锚点参数：

  {
    path: '**',
    redirectTo: 'page-not-found' // 去掉路径前的/，不要用绝对路径
  }
  

  注意该方案在低版本Angular中仍可能出现解析异常，还是建议配合routerLink的fragment写法使用。

• 方案3（不推荐）：关闭哈希路由模式
  移除useHash: true配置，改用默认的PathLocationStrategy路由模式，此时#后的内容会默认识别为锚点，不会和路由逻辑冲突，但需要服务端配置所有路由请求fallback到index.html，部署成本更高。

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