Angular路由问题：空路径路由优先级异常，需仅在空路径时生效

问题核心 #

你遇到的问题是：当路由模块中存在空路径(path: "")路由时，即使导航到/owner或/customer，仍会显示选择界面；移除该空路径路由后，其他路由可正常工作。

最可能的原因与解决方案 #

1. 根路由挂载路径错误 #

大概率是你在根路由（AppRoutingModule）中，把SignUpModule挂载到了某个子路径（比如/owner），而非根路径(/)。这种情况下，SignUpRoutingModule里的空路径路由会匹配/owner，导致显示选择界面。

修正根路由配置：
确保SignUpModule挂载到根路径：

// app-routing.module.ts
@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: '',
        loadChildren: () => import('./signup/sign-up.module').then(m => m.SignUpModule)
      },
      // 其他根路由配置
    ])
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

2. 路由顺序与匹配规则确认 #

即使根路由配置正确，也要确保空路径路由放在路由数组的最后一位——Angular路由按顺序匹配，先匹配到的路由会被优先使用。同时保留pathMatch: "full"，确保只有当路径完全为空时才触发该路由。

修正后的SignUpRoutingModule：

@NgModule({
  imports: [
    RouterModule.forChild([
      // 先配置具体路径路由
      {
        path: "owner",
        loadChildren: () => import("./owner/sign-up-owner.module").then((m) => m.SignUpOwnerModule)
      },
      {
        path: "customer",
        loadChildren: () => import("./customer/sign-up-customer.module").then((m) => m.SignUpCustomerModule),
      },
      // 空路径路由放在最后
      {
        path: "",
        component: SignUpComponent,
        pathMatch: "full"
      }
    ])
  ],
  exports: [RouterModule]
})
export class SignUpRoutingModule {}

3. 子模块路由验证 #

确认子模块（如SignUpOwnerModule）的路由配置正确，确保加载后能正常显示步骤组件：

@NgModule({
  imports: [ 
    RouterModule.forChild([
      {
        path: "",
        component: SignUpOwnerComponent,
        children: [
          { path: "step1", component: SignUpOwnerStep1Component },
          { path: "step2", component: SignUpOwnerStep2Component },
          { path: "step3", component: SignUpOwnerStep3Component },
          {
            path: "",
            redirectTo: "step1",
            pathMatch: "full",
          },
        ]
      }
    ])
  ],
  declarations: [SignUpOwnerComponent, SignUpOwnerStep1Component, SignUpOwnerStep2Component, SignUpOwnerStep3Component]
})
export class SignUpOwnerModule {}

验证效果 #

配置完成后：

• 访问/：显示选择界面（SignUpComponent）
• 访问/owner：加载SignUpOwnerModule，自动重定向到/owner/step1，显示带帮助按钮的步骤界面
• 访问/customer：同理加载对应的客户注册模块

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