angular - Angular 5 延迟加载的模块路径相互重叠

Question

我有一个带有两个延迟加载模块的应用程序。

主要模块：

const appRoutes = RouterModule.forRoot([
    {path: '', redirectTo: '/welcome', pathMatch: 'full'},
    {
      path: 'guest',
      loadChildren: 'app/guest-module/guest.module#GuestModule',
    },
    {
      path: '',
      loadChildren: 'app/user-module/user.module#UserModule',
    },
    {path: '**', component: NopageComponent},
  ],
);

子模块 1（GuestModule）：

  const viewRoutes = RouterModule.forChild([
     {path: 'overview/:reportId', component: HistoryOverviewComponent, canActivate: [GuestAuthGuard]},
  ]);

子模块 2 (UserModule)：

  const viewRoutes = RouterModule.forChild([
     {path: 'overview/:reportId', component: HistoryOverviewComponent, canActivate: [UserAuthGuard]},
  ]);

当我路由到 /guest/overview/1 时，它总是命中 UserAuthGuard。子路由相互重叠是否正常？

有没有办法通过配置而不是更改名称来区分它们？

我使用 angular 5.2.9 和 angular cli 1.7.3。

Answer 1

我认为你的问题出在

{
  path: '',
  loadChildren: 'app/user-module/user.module#UserModule',
},

您必须为该路径提供名称或添加 pathMatch: 'full' 以避免重定向到用户路径，我建议这样做：

 {
   path: 'guest',
   loadChildren: 'app/guest-module/guest.module#GuestModule',
 },
 {
   path: 'user',
   loadChildren: 'app/user-module/user.module#UserModule',
 },
 {path: '**', component: NopageComponent},

或者：

 {
   path: 'guest',
   loadChildren: 'app/guest-module/guest.module#GuestModule',
 },
 {
   path: '',
   loadChildren: 'app/user-module/user.module#UserModule',
   pathMatch: 'full'
 },
 {path: '**', component: NopageComponent},