如何正确设置angular子路由

Question

我正在尝试设置子路径，但是在导航时，路径被证明是错误的

我有一个机柜模块，这些是它的路由器

const routes: Routes = [
  {
    path: '',
    component: CabinetComponent,
    children: [
      {
        path: RouteCabinetPath.DASHBOARD,
        loadChildren: () => import('./pages/dashboard/dashboard.module').then(m => m.DashboardModule)
      },
    ]
  }
];

export enum RouteCabinetPath {
  CABINET = 'cabinet',
  DASHBOARD = 'dashboard',
}

我想确保我有通往机柜本身的路径 /cabinet 和 /cabinet/dashboard

Answer 1

您应该将路径：'' 更改为路径：'cabinet',

 const routes: Routes = [
      {
        path: 'cabinet',
        component: CabinetComponent,
        children: [
          {
            path: RouteCabinetPath.DASHBOARD,
            loadChildren: () => import('./pages/dashboard/dashboard.module').then(m => m.DashboardModule)
          },
        ]
      }
    ];

Answer 2

由于这是一个（可能）延迟加载的功能模块，因此 /cabinet-部分路由将位于 AppRoutingModule:

{path: 'cabinet', loadChildren: () => ...CabinetModule }

在 CabinetRoutingModule 中，您需要定义两条路线：

[
  {path: '', component: CabinetComponent},
  {path: 'dashboard', loadChildren: () => ...DashboardModule}
]

或者如果您想将这两条路线嵌入到您的 CabinetComponent 中，您可以添加一条带有空路线的子路线

{path: '', component: CabinetComponent,
 children: [
    {path: '', component: CabinetDetailsComponent},
    {path: 'dashboard', loadChildren: () => ...DashboardModule
 ]

如何正确设置angular子路由

How to set up the angular child routing correctly

angular-routing

angular