Angular 15登录URL路由异常：输入子路由始终重定向至/auth

问题根源是路由路径重复嵌套定义：

• app-routing.module.ts中已通过path: 'auth'作为懒加载入口指向AuthModule；
• 但auth-routing.module.ts里又将父路由的path设为'auth'，导致实际期望的/auth/super-user-login会被解析为/auth/auth/super-user-login，无法匹配到对应子路由，最终 fallback 到子路由的空路径（即LoginComponent）。

修改auth-routing.module.ts的路由配置，将父路由的path改为空字符串即可：

const routes: Routes = [
  {
    path: '', // 从'auth'改为空字符串
    component: AuthComponent,
    children: [
      {
        path: '',
        component: LoginComponent,
      },
      {
        path: 'admin-user-login',
        component: AdminUserLoginComponent,
      },
      {
        path: 'super-user-login',
        component: SuperUserLoginComponent,
      },
      {
        path: 'must-change-password',
        component: MustChangePasswordComponent,
      },
      {
        path: 'change-password',
        component: ChangePasswordComponent,
      },
      {
        path: 'navigation-login-info',
        component: NavbarLoginInfoComponent,
      },
      {
        path: 'forgot-password',
        component: ForgotPasswordComponent,
      },
      {
        path: 'reset-password',
        component: ResetPasswordComponent,
      },
    ],
  },
];

逻辑说明 #

当app-routing中的path: 'auth'懒加载AuthModule后，AuthModule内的路由会自动继承/auth作为路径前缀。此时将auth-routing的父路由path设为空，子路由路径会直接拼接在/auth之后：

• /auth → 匹配子路由空路径，加载LoginComponent
• /auth/super-user-login → 匹配对应子路由，加载SuperUserLoginComponent
• /auth/admin-user-login → 匹配对应子路由，加载AdminUserLoginComponent

修改后即可解决输入指定URL后被重定向回/auth的问题。

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