防止用户导航到功能模块内的父路由

Question

我有一个 Angular 10 的应用程序，其中包含 2 个功能模块。一个用于可以通过 de ' ' 路由到达的着陆页，延迟加载功能模块 LandingPageModule。第二个是仪表板，可以通过 '/dashboard' 路由访问，延迟加载功能模块 DashboardModule.

在 DashboardModule 中，我需要一个侧边栏在用户的整个导航过程中保持可见。我使用了子路由来实现这一点，因此侧边栏可以添加到父组件中，并使用 <router-outlet> 处理子路由，允许用户在子路由中导航。

DashboardRoutingModule中有3条子路由：

'/dashboard/summary' 加载中 SummaryComponent
'/dashboard/bookings' 加载中 BookingListComponent
'/dashboard/clients' 加载中 ClientListComponent

我做了这个 schema of the route workflow 来完成我的解释。

在这里你可以找到实现这个的代码

AppRoutingModule

const routes: Routes = [
  { path: '', loadChildren: () => import('./landing-page/landing-page.module').then(m => m.LandingPageModule) },
  { path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule) },
  { path: '**', redirectTo: '' }
];

app.component.html

<router-outlet></router-outlet>

LandingPageRoutingModule

const routes: Routes = [{ path: '', component: LandingPageComponent }];

DashboardRoutingModule

const routes: Routes = [
  { 
    path: '', component: DashboardComponent, 
    children: 
    [
      { path: 'summary', component: SummaryComponent },
      { path: 'bookings', component: BookingListComponent },
      { path: 'clients', component: ClientListComponent },
    ]
  },
  { path: '**', redirectTo: '', pathMatch: 'full' }
];

dashboard.component.html

<div id="wrapper">
    <app-sidebar></app-sidebar>
    <div id="content">
        <router-outlet></router-outlet>
    </div>    
</div>

我的问题是

当用户导航到 /dashboard 时，他会看到边栏和旁边的空白页，因为 <router-outlet> 下面没有添加任何组件。

我的问题是

我应该怎么做才能防止用户手动导航到 /dashboard？

如果我使用 redirectTo，DashboardComponent 不会加载，子路由根本无法工作。

另一个好的解决方案是删除 /dashboard/summary 子路由。当用户导航到 /dashboard 时，它将加载 SummaryComponent 作为路由器的出口并保持侧边栏可见。但是我找不到任何方法让它像那样工作。

Answer 1

我只需要添加另一个子路由来处理 ' '。

DashboardRoutingModule

const routes: Routes = [
  { 
    path: '', component: DashboardComponent, 
    children: 
    [
      { path: 'summary', component: SummaryComponent },
      { path: 'bookings', component: BookingListComponent },
      { path: 'clients', component: ClientListComponent },
      { path: '', pathMatch: 'full', redirectTo: 'summary'} //New child route handling ''
    ] 
  },
  { path: '**', redirectTo: '', pathMatch: 'full' }
];

防止用户导航到功能模块内的父路由

Prevent user from navigating to parent route inside feature module

angular

angular2-routing

angular-routing

angular-module