如何解决防止用户导航到功能模块内的父路线
我有一个带有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' }
];
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。