Angular嵌套懒加载子路由时URL及面包屑显示异常咨询

问题根因 #

三处配置错误导致URL和面包屑不符合预期：

• 主路由中将view-model配置为与home平级的顶级路由，路径天然不会挂载在/home下
• 子模块路由重复定义了path: 'view-model'层级，且对应层级未配置breadcrumb字段，面包屑无法读取到对应文案
• 若home组件未放置路由出口，即使调整路由层级，子页面也无法正常渲染

修复步骤 #

1. 调整主路由配置，将view-model的懒加载规则挂载到home路由的children下，修正后代码如下：

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full',
  },
  {
    path: 'home',
    component: InformationPageComponent,
    children: [
      {
        path: 'view-model',
        loadChildren: './view-model/model-20-sm.module#Model20SmModule',
        canActivateChild: []
      }
    ]
  },
  {
    path: '**',
    component: PageNotFoundComponent
  }
];

2. 修改子模块路由配置，删除重复的view-model路径定义，补充缺失的面包屑配置，修正后代码如下：

@NgModule({
  imports: [
    RouterModule.forChild([
      {
        path: '',
        data: {
          title: 'LABEL.DELEGHE',
          breadcrumb: 'view-model'
        },
        children: [
          {
            path: 'dettaglio-ditta',
            data: {
              title: 'LABEL.RICERCA_PAT',
              breadcrumb: 'LABEL.RICERCA_PAT',
            },
            children: [
              {
                path: 'dettaglio-quadro',
                data: {
                  title: 'LABEL.DETTAGLIO_MODELLO_20SM',
                  breadcrumb: 'LABEL.DETTAGLIO_MODELLO_20SM',
                },
                component: DettaglioQuadroComponent
              },
              {
                path: '',
                data: {
                  title: 'LABEL.RICERCA_PAT',
                  breadcrumb: '',
                },
                component: DettaglioDittaComponent,
              }
            ]
          },
          {
            path: '',
            component: DelegheComponent,
          },
        ]
      },
    ])
  ],
  exports: [RouterModule]
})

3. 配套校验项

• 确认InformationPageComponent模板内添加了<router-outlet></router-outlet>标签，作为子路由的渲染出口
• 将菜单中view-model的跳转链接从/view-model修改为/home/view-model，匹配新的路由层级
• 调整完成后访问http://localhost:4200/#/home/view-model即可正常加载页面，面包屑也会按层级读取配置的字段，显示Home > view-model的预期效果

内容的提问来源于stack exchange，提问作者aulona aulona