0

我在 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 的 home 路由是惰性加载的：

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”中，则不需要评估。它应该重定向到仪表板，这就是我在主路由中定义此路由的原因：

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

此外，您可以访问路线“spa/list”，但它不应该存在该路线。如果您输入“spa/user_management/list”，它应该可以工作，否则我想将用户重定向到仪表板。

提前致谢。

4

1 回答 1

0

您必须在您的AppRoutingModule.

{
    // Default all the unmapped URLs to the dashboard as default
    path: '**',
    redirectTo: '/dashboard',
    pathMatch: 'full',
}
于 2020-10-16T11:13:19.967 回答