Angular路由重定向异常：访问localhost:4200无法跳转至localhost:4200/workbench且URL不变化

我之前也遇到过类似的Angular路由重定向问题，你的情况主要是路由模块导入顺序和路由结构匹配逻辑的问题，下面给你几个可行的解决办法：

问题根源分析 #

1. 路由匹配优先级：Angular会按照模块导入的顺序来匹配路由规则。你的AppModule里先导入了HomeModule，后导入AppRoutingModule，所以HomeRoutingModule中的空路径路由（path: ''）会被优先匹配，直接加载HomeComponent，导致AppRoutingModule里的重定向规则根本没有执行的机会。
2. 子路由匹配逻辑：workbench是HomeComponent的子路由，只有当URL为/workbench时才会触发该子路由的加载，但初始访问/时，即使进入了HomeComponent，也不会自动加载子路由组件。

解决方案 #

方案1：调整模块导入顺序 #

把AppRoutingModule移到HomeModule之前导入，让根路由的重定向规则优先被匹配：

// app.module.ts
imports: [
  ...
  AppRoutingModule, // 优先导入根路由模块
  HomeModule,
  AccountModule,
]

这样访问localhost:4200时，会先触发AppRoutingModule的重定向，将URL改为/workbench，此时HomeRoutingModule的子路由就能匹配到workbench，加载HomeComponent和WorkbenchComponent。

方案2：添加HomeComponent的默认子路由 #

如果不想调整模块导入顺序，可以在HomeRoutingModule的子路由中添加默认重定向，让进入HomeComponent时自动加载WorkbenchComponent：

// home-routing.module.ts
const routes: Routes = [
  { path:'', component:HomeComponent, children:[
      {path:'', redirectTo:'workbench', pathMatch:'full'}, // 新增默认子路由重定向
      {path:'workbench',component:WorkbenchComponent},
    ]
  }
];

这样访问/时，会先加载HomeComponent，然后自动重定向到/workbench，URL也会同步更新。

方案3：规范路由结构（推荐） #

如果希望HomeComponent作为父组件承载所有子路由，建议给它设置一个明确的父路径，比如home，同时调整根路由的重定向目标：

// home-routing.module.ts
const routes: Routes = [
  { path:'home', component:HomeComponent, children:[
      {path:'workbench',component:WorkbenchComponent},
      // 可在此添加其他Home相关子路由
    ]
  }
];

// app-routing.module.ts
const routes: Routes = [
  {path:'', redirectTo:'/home/workbench', pathMatch:'full'},
  {path:'**', component:PageNotFoundComponent}
];

记得保持AppRoutingModule在HomeModule之前导入，这样重定向后会正确加载HomeComponent及其子组件WorkbenchComponent。

额外注意事项 #

• 确保AppRoutingModule使用RouterModule.forRoot(routes)，而子模块的路由（如HomeRoutingModule）使用RouterModule.forChild(routes)。
• 检查AppComponent中是否存在根路由出口<router-outlet></router-outlet>，HomeComponent中是否存在子路由出口<router-outlet></router-outlet>（子路由组件需要在父组件的路由出口中显示）。

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