Angular多参数多路径路由至同一组件时自动跳转至欢迎页问题

你遇到的路由跳转后瞬间回到欢迎页的问题，核心原因大概率是路由匹配顺序错误，结合你的代码细节，具体分析如下：

关键问题点 #

1. 通配符路由优先级过高：你的根路由配置中，**通配符路由被放在了子模块路由的前面。因为根模块先导入RouterModule.forRoot（包含**），之后才导入子模块，子模块的路由会被添加到路由数组的末尾（也就是**之后）。而**会匹配任何路径，导致导航到子模块路径时，先触发**的重定向规则，跳转到welcome页面。
2. 路由大小写潜在冲突：你提到URL显示为UpdateStatement（首字母大写），但路由配置是小写的updateStatement，Angular路由默认区分大小写，这也可能导致路由匹配失败，触发**重定向。

分步解决方案 #

1. 调整路由加载顺序，确保**是最后一个路由

正确的做法是通过懒加载子模块，让子模块路由优先于**被匹配，同时把**放在所有路由的最后：

修改根模块路由配置：

@NgModule({ 
  declarations: [ 
    AppComponent, 
    WelcomeComponent 
  ], 
  imports: [ 
    BrowserModule, 
    HttpClientModule, 
    RouterModule.forRoot([ 
      { path: 'welcome', component: WelcomeComponent }, 
      { path: '', redirectTo: 'welcome', pathMatch: 'full' }, 
      // 懒加载子模块，指定路径前缀
      { 
        path: 'updateStatements', 
        loadChildren: () => import('./update-statements/update-statements.module').then(m => m.UpdateStatementsModule) 
      },
      { path: '**', redirectTo: 'welcome', pathMatch: 'full' } // 必须放在最后
    ])
    // 移除直接导入的UpdateStatementsModule
  ], 
  providers: [], 
  bootstrap: [AppComponent] 
})

2. 修改子模块路由为相对路径

子模块路由不再需要前缀，直接使用相对路径对应根路由的updateStatements前缀：

@NgModule({ 
  declarations: [ 
    UpdateStatementComponent, 
    UpdateStatementListComponent, 
    UpdateStatementSearchComponent 
  ], 
  imports: [ 
    DevExtremeModule, 
    RouterModule.forChild([ 
      // 匹配 /updateStatements
      {path: '', component: UpdateStatementComponent, pathMatch: 'full'}, 
      // 匹配 /updateStatements/1
      {path: ':id', component: UpdateStatementComponent, pathMatch: 'full'}, 
      // 匹配 /updateStatements/1/copy/true
      {path: ':id/copy/:isCopy', component: UpdateStatementComponent, pathMatch: 'full'}, 
      // 匹配 /updateStatements/list
      {path: 'list', component: UpdateStatementListComponent}, 
      // 匹配 /updateStatements/list/xxx
      {path: 'list/:isSaved', component: UpdateStatementListComponent}, 
      // 匹配 /updateStatements/search
      {path: 'search', component: UpdateStatementSearchComponent} 
    ]), 
    SharedModule 
  ] 
})

3. 修正导航代码路径

对应新的路由前缀，修改导航逻辑：

onKopirajClick(k) { 
  this.id = k.data.id; 
  this.router.navigate(['updateStatements', this.id, 'copy', true]); 
}

4. 优化组件内参数监听

去掉冗余的snapshot获取，只保留paramMap订阅，同时在订阅内判断参数有效性，避免无效API请求：

ngOnInit() { 
  this.route.paramMap.subscribe(params => { 
    console.log(params); 
    const statementId= +params.get('id'); 
    const copy = params.get('isCopy'); 
    if (statementId && statementId > 0) {
      this.getStatement(statementId); 
    }
  }); 
}

5. 统一路由大小写

确保导航代码、路由配置和URL的路径大小写完全一致（建议统一使用小写），避免区分大小写导致的匹配失败。

额外优化建议 #

你可以合并UpdateStatementComponent的三个路由为一个嵌套路由配置，减少冗余：

{
  path: '',
  component: UpdateStatementComponent,
  children: [
    { path: ':id', component: UpdateStatementComponent },
    { path: ':id/copy/:isCopy', component: UpdateStatementComponent }
  ]
}

这样不管是访问/updateStatements、/updateStatements/1还是/updateStatements/1/copy/true，都会加载UpdateStatementComponent。

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