当你在Angular中延迟加载了路径为空的模块时，如何重定向到仪表板？

我对Angular 9中的路由有一个问题。这是应用路由模块：

const routes: Routes = [
   { path: '', loadChildren: () => HomeModule, canActivate: [AuthGuard] },
   { path: 'login', component: LoginComponent },
   { path: 'register', component: RegisterComponent, canDeactivate: [CanDeactivateGuard] },
   { path: 'payment', component: PaymentComponent },
];

@NgModule({
   imports: [
       RouterModule.forRoot(routes, { enableTracing: true })
   ],
   exports: [RouterModule]
})

export class AppRoutingModule {}

这里来自HomeModule的主路由装入了惰性：

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children: [
      { path: 'dashboard', component: DashboardComponent, canActivate: [CloseDrawerGuard] },
      { path: 'zones', component: ZonesComponent, canActivate: [CloseDrawerGuard] },
      { path: 'workplaces', component: WorkplacesComponent, canActivate: [CloseDrawerGuard] },
      { path: 'user_management', loadChildren: () => UserManagementModule },
      { path: 'tenant_management', loadChildren: () => TenantManagementModule },
      { path: 'schedules', component: SchedulesComponent, canActivate: [CloseDrawerGuard] },
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
    ]
  }
];


@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [RouterModule]
})

export class HomeRoutingModule {}

用户管理路由从UserManagementModule加载的惰性。

const routes: Routes = [
    { path: '', component: UserManagementComponent,
    children: [
        { path: '', redirectTo: 'list', pathMatch: 'full' },
        { path: 'list', component: UserListManagementComponent, canActivate: [CloseDrawerGuard] },
        { path: 'grid', component: UserGridManagementComponent, canActivate: [CloseDrawerGuard] }
    ]}
];

@NgModule({
    imports: [
        RouterModule.forChild(routes)
    ],
    exports: [RouterModule]
})

export class UserManagementRoutingModule {}

最后是TenantManagementModule的路由(也是惰性负载)。

const routes: Routes = [
    { path: '', component: TenantUpdateComponent, canActivate: [CloseDrawerGuard] },
    { path: 'invoices', component: InvoicesComponent, canActivate: [CloseDrawerGuard] },
    { path: 'subscription', component: SubscriptionComponent, canActivate: [CloseDrawerGuard] },
];

@NgModule({
    imports: [
        RouterModule.forChild(routes)
    ],
    exports: [RouterModule]
})
export class TenantManagementRoutingModule {}

问题是，当用户输入基本url ( spa/ )时，它应该重定向到spa/dashboard，而不是重定向到spa/，并显示TenantUpdateComponent，因为它有空路径。但是，如果您在路由'spa/tenant_management‘中，则应该只评估空路径，而如果您在基本路由'/spa’中，则不应评估空路径。它应该重定向到仪表板，这就是我在home-routing中定义此路由的原因：

{ path: '', redirectTo: 'dashboard', pathMatch: 'full' }

此外，您可以访问路由'spa/list‘，但它不应该存在于路由中。如果您输入'spa/ user _management/list'，它应该可以工作，如果没有，我想将用户重定向到仪表板。

提前谢谢。

转载请注明出处:http://www.jubohx.com/article/20230523/1051582.html