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

问题描述

我有一个带有2个功能模块的Angular 10应用。可以使用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 },]
  },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作为路由器的出口，并保持侧边栏可见。但是我找不到任何使它那样工作的方法。

解决方法

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

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' }
];