在angular中，从子节点路由到另一个根节点的正确方法是什么？

Question

我有一个登录页面，和一个懒惰加载的模块，它的子节点构成了app中的大部分页面。下面是app-routing.module.ts。

const routes: Routes = [{
    path: '',
    loadChildren: './main/main.module#MainModule'
  },
  {
    path: '',
    component: LoginLayoutComponent,
    children: [{
      path: 'login',
      component: LoginComponent
    }]
  },
  {
    path: '**',
    component: PageNotFoundComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

现在我有一个主模块，它有几个子页面。让我们来看看main-routing.module.ts。

onst routes: Routes = [{
  path: '',
  canActivate: [AuthGuard],
  component: LayoutComponent,
  children: [{
      path: '',
      redirectTo: 'home',
      pathMatch: 'full'
    },
    {
      path: 'home',
      component: HomeComponent
    },
    {
      path: 'user',
      loadChildren: './user/user.module#UserModule'
    },
    {
      path: 'dashboard',
      loadChildren: './dashboard/dashboard.module#DashboardModule'
    },
    {
      path: '**',
      component: PageNotFoundComponent
    }
  ]
}];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class MainRoutingModule {}

在RouteGuard中，如果用户没有登录，我们会将他们重定向到登录页面。

    this.router.navigate(['/login']);

问题是，路由器试图找到 path:'login' 在MainRoutingModule的路由中，而'login'实际上是AppRoutingModule路由的一部分。任何帮助都将被感激。

Answer 1

我相信路由器是在你的app-routing模块中取第一个匹配的内容，你把它指定为 ''. 然后就是加载子程序，也就是主路由模块。由于主路径和登录路径都是一样的--------。'' - 路由器将永远无法进行第二次匹配。考虑将登录的父路由路径设为 'login' 并将登录的子路径设为 ''.

编辑1:

看来路由器还在匹配 '' 在主模块的路径值中。考虑将Login组件重新排列在主模块之上，或者在主模块的路径中添加一个值，而不是空的--。''.

作为一个旁观者，你基本上是懒得一次性加载整个应用。随着时间的推移，你可以考虑将所有这些子程序从主模块中拉出来，然后直接从App Routing模块中懒惰地加载它们。(这也可以解决你的问题，因为你不会有空的--。'' - 路径）。)

当您使用空路径 - '' - 考虑加一个 pathMatch 的策略 'full' 根据 角度路由 文档，这样你就不会再遇到这个问题了，因为从技术上讲，每个根路径都会匹配一个空的--。'' - 段之前的任何其他段(你在这里也面临同样的问题)。

编辑2:

const routes: Routes = [
  {
    path: 'login',
    component: LoginLayoutComponent,
    children: [{
      path: '',
      pathMatch: 'full',
      component: LoginComponent
    }]
  },
  {
    path: 'main',
    loadChildren: () => import('./main/main.module').then(m => m.MainModule)
  },
  {
    path: '**',
    component: PageNotFoundComponent
  }
];