错误重定向 Angular 路由器（到本地主机）

Question

这是示例网址：

localhost:4202/pages/users/STSP0001PNIENOUIJX/dashboards/level/0

app-routing.module.ts

const routes: Routes = [
  {
    path: 'pages/users',
    loadChildren: () => import('./@modules/users-dashboard/users-dashboard.module').then(mod => mod.UsersDashboardModule),
  },
  ...
]

用户仪表板路由模块

const routes: Routes = [
  {
    path: ':userId/dashboards',
    loadChildren: () => import('../monitoring-levels/monitoring-levels.module').then( (module) => module.MonitoringLevelsModule)
  },
  { path: '', component: PageNotFoundComponent },
  { path: '**', component: PageNotFoundComponent }
];

监控级别路由模块

const routes: Routes = [
  { path: 'level/:levelId', component: MonitoringDashboardComponent },
  { path: '', redirectTo: `level/${DEFAULT_LEVEL_ID}`},
  { path: '**', redirectTo: `level/${DEFAULT_LEVEL_ID}`}
];

监控仪表板组件

<ng-container [ngSwitch]="monitoringLevelID">
  <level0-monitoring-dashboard *ngSwitchDefault></level0-monitoring-dashboard>
  <level1-monitoring-dashboard *ngSwitchCase="1"></level1-monitoring-dashboard>
  <level2-monitoring-dashboard *ngSwitchCase="2"></level2-monitoring-dashboard>
</ng-container>

使用示例 url，我得到重定向到 localhost:4202

这只适用于经过此修改的：

• 删除路径：MonitoringLevelsRoutingModule 的“”
• 将pathMatch: 'full'添加到MonitoringLevelsRoutingModule

监控级别路由模块

const routes: Routes = [
  { path: 'level/:levelId', component: MonitoringDashboardComponent },
 
  { path: '**', redirectTo: `level/${DEFAULT_LEVEL_ID}`}
];

或

const routes: Routes = [
  { path: 'level/:levelId', component: MonitoringDashboardComponent },
  { path: '', redirectTo: `level/${DEFAULT_LEVEL_ID}`, pathMatch: 'full'}
  { path: '**', redirectTo: `level/${DEFAULT_LEVEL_ID}`}
];

Answer 1

您遇到的问题是由于未明确定义

pathMatch

属性时 Angular 的路由器匹配路径的方式造成的。让我们来分析一下发生了什么以及为什么您的修改可以解决问题。

理解问题

原创

MonitoringLevelsRoutingModule

const routes: Routes = [
  { path: 'level/:levelId', component: MonitoringDashboardComponent },
  { path: '', redirectTo: `level/${DEFAULT_LEVEL_ID}` },
  { path: '**', redirectTo: `level/${DEFAULT_LEVEL_ID}` }
];

使用此配置：

• path: 'level/:levelId'

  正确匹配

  /level/0

  、

  /level/1

  等 URL。

• path: ''

  没有

  pathMatch

  默认为

  pathMatch: 'prefix'

  。

• path: '**'

  是一个通配符，匹配任何与之前的路由不匹配的路径。

问题

当您导航至：

localhost:4202/pages/users/STSP0001PNIENOUIJX/dashboards/level/0

发生的事情是这样的：

1. 路由匹配开始：路由器开始按顺序将 URL 段与路由进行匹配。
2. 空路径路由匹配：

   path: ''

   路由匹配每个URL，因为空字符串是任何字符串的前缀。由于

   pathMatch

   默认为

   'prefix'

   ，因此该路线会拦截所有导航尝试。
3. 发生重定向：路由器重定向到

   level/${DEFAULT_LEVEL_ID}

   ，但由于配置错误，此重定向可能无法正确解析，可能导致重定向循环或导航到根。

为什么修改可以修复它

修改一：删除

path: ''

并调整通配符路由

const routes: Routes = [
  { path: 'level/:levelId', component: MonitoringDashboardComponent },
  // Removed { path: '', redirectTo: `level/${DEFAULT_LEVEL_ID}` },
  { path: '**', redirectTo: `level/${DEFAULT_LEVEL_ID}` }
];

通过删除

path: ''

路线：

• 路由器不再将每个 URL 与空路径路由进行匹配。

• path: '**'

  通配符路由捕获任何不匹配的路径并适当地重定向。

修改2：在空路径路由中添加

pathMatch: 'full'

const routes: Routes = [
  { path: 'level/:levelId', component: MonitoringDashboardComponent },
  { path: '', redirectTo: `level/${DEFAULT_LEVEL_ID}`, pathMatch: 'full' },
  { path: '**', redirectTo: `level/${DEFAULT_LEVEL_ID}` }
];

添加

pathMatch: 'full'

：

• 仅当 URL 路径与空字符串完全匹配时（即，当用户位于此路由模块的基本路径时），

  path: ''

  路由才匹配。
• 它不再拦截像

  level/0

  这样的URL，允许它们通过正确的路由进行匹配。

说明

• pathMatch: 'prefix'

  （默认行为）：路由器检查 URL 的开头是否与路由的路径匹配。由于每个字符串都以空字符串开头，因此带有

  pathMatch: 'prefix'

  的空路径会匹配每个 URL。

• pathMatch: 'full'

  ：路由器检查整个 URL 是否与路由的路径匹配。仅当 URL 中没有任何内容可供处理时，带有

  pathMatch: 'full'

  的空路径才会匹配。

最佳实践

使用空路径进行重定向时，请始终指定

pathMatch: 'full'

以防止意外匹配：

{ path: '', redirectTo: 'your-default-path', pathMatch: 'full' }

总结

原来的路由配置由于缺少

pathMatch: 'full'

，导致路由器将所有URL都匹配为空路径路由，从而导致错误的重定向。通过调整

pathMatch

属性或删除冲突的路由，您可以确保像

level/0

这样的 URL 正确匹配，并且仅在适当的时候才会发生重定向。