Angular路由跳转后URL丢失路径与参数问题求助

根因分析 #

URL短暂显示正确后被重置的核心原因有两个：

1. 根路由中search和search/AutomaticCounter/:id两个规则都指向同一个MainModule懒加载模块，当跳转到带ID的路径时，MainModule加载完成后内部路由没有匹配到当前完整路径，触发了模块内部的默认重定向逻辑，将路径冲回了/search。
2. 跳转代码、路由配置、预期目标路径的拼写可能不一致：代码中跳转路径为单数AutomaticCounter，预期目标路径为复数AutomaticCounters，拼写不匹配也会导致路由匹配失败触发重定向。

可行解决方案 #

方案1：兼容原有双路由架构（推荐，无需改动项目原有根路由设定） #

仅修改MainModule内部的路由配置，补充对应路径的匹配规则即可：

• 打开./modules/main/main.module对应的路由配置文件，新增和根路由后缀完全匹配的路由规则：

// MainModule内部路由配置示例
const mainRoutes: Routes = [
  // 原有search相关路由保留
  {
    path: 'AutomaticCounter/:id', // 和根路由配置的后缀完全一致，需要复数就改成AutomaticCounters
    component: 目标业务组件,
    // 可补充canActivate、data等原有配置项
  },
  // 调整默认重定向规则的pathMatch为full，避免误匹配带参数的路径
  { path: '', component: SearchHomeComponent, pathMatch: 'full' }
];

• 同步跳转代码、根路由配置、MainModule内部路由的路径拼写，三者保持完全一致即可。

方案2：修复根路由子路由配置不生效问题 #

你之前配置search子路由不生效，是因为没有删除独立的search/AutomaticCounter/:id根路由规则，按以下步骤调整即可：

• 删除根路由中独立的search/AutomaticCounter/:id路由项
• 调整根路由的search配置，增加子路由规则：

// 修改后的根路由search配置
{
  path: 'search',
  children: [
    { 
      path: '', 
      loadChildren: () => import('./modules/main/main.module').then(m => m.MainModule), 
      pathMatch: 'full' 
    },
    { 
      path: 'AutomaticCounter/:id', 
      loadChildren: () => import('./modules/main/main.module').then(m => m.MainModule) 
    }
  ]
}

• 同样同步MainModule内部路由和跳转代码的路径拼写，保证三者匹配。

排查技巧 #

如果需要快速定位重定向来源，可以临时把根路由的enableTracing配置改为true，打开浏览器控制台查看完整的路由跳转日志，能直接看到是哪一条路由规则触发了重定向，精准定位问题点。

注意事项 #

• 使用relativeTo配置跳转时，要确认当前激活路由的层级，避免相对路径拼接错误。如果不确定层级可以直接用绝对路径跳转（路径开头加/），例如this.router.navigate(['/search', 'AutomaticCounter', currentCounter.Id])，排除路径拼接问题。
• Angular路由默认大小写敏感，所有路径的大小写、拼写必须完全一致，否则会匹配失败。

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