Angular移动端折叠导航菜单点击链接出现404错误问题

以下是针对该问题的具体排查和修复方案：

• 检查链接绑定方式
  折叠菜单中的链接如果使用原生<a href="...">标签，会触发整页刷新，而Angular单页应用的服务器若未配置SPA fallback路由，就会返回404。展开状态下正常说明大概率用了routerLink。把所有导航链接替换为Angular路由指令：

  <!-- 错误写法 -->
  <a href="/contact">联系我们</a>
  <!-- 正确写法 -->
  <a routerLink="/contact">联系我们</a>
  

• 排查菜单折叠事件的干扰
  折叠菜单的父元素可能有点击事件用来切换菜单状态，若事件处理中错误调用了event.preventDefault()，会阻止链接的正常跳转。修改事件处理逻辑，判断点击目标是否为路由链接：

  toggleMenu(event: Event) {
    const targetEl = event.target as HTMLElement;
    // 仅当点击的不是路由链接时，执行折叠逻辑并阻止默认行为
    if (!targetEl.closest('a[routerLink]')) {
      this.menuCollapsed = !this.menuCollapsed;
      event.preventDefault();
    }
  }
  

• 验证路由路径的一致性
  在浏览器开发者工具中，分别查看展开和折叠状态下的链接元素，对比routerLink属性或生成的href值是否完全一致。若折叠状态下路径有误（比如多了前缀/后缀），检查菜单组件的模板逻辑，确保链接路径生成正确。

• 备选：启用Hash模式路由
  若服务器无法配置SPA fallback，可以临时启用Hash模式让路由在客户端解析：

  @NgModule({
    imports: [RouterModule.forRoot(routes, { useHash: true })],
    exports: [RouterModule]
  })
  export class AppRoutingModule {}
  

内容的提问来源于stack exchange，提问作者Carlos Eduardo Rodriguez Lopez