Angular嵌套组件路由配置：如何实现根路径级子页面跳转

嘿，我完全get到你的痛点了——你想让dashboard、charts、tables这些页面直接挂在网站根路径下（比如www.mypage.com/charts），但又希望它们共享SecondPageContainer这个容器组件对吧？你的两个方案之所以会生成嵌套路径，核心问题是把这些子路由嵌套在了dashboard父路径下面，而我们需要的是把它们直接注册在根路由层级，同时绑定到同一个容器上。

下面是两种可行的配置方案，你可以根据是否需要懒加载来选择：

方案一：直接在根路由配置（非懒加载） #

这种方式适合组件较少、不需要懒加载的场景，配置简单直观：

1. 根路由文件（app-routing.module.ts）：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
// 导入所有需要的组件
import { StartPageContainerComponent } from './start-page-container/start-page-container.component';
import { PriceComponent } from './price/price.component';
import { AboutComponent } from './about/about.component';
import { SecondPageContainerComponent } from './secound-page-container/secound-page-container.component';
import { DashboardComponent } from './secound-page-container/dashboard/dashboard.component';
import { ChartsComponent } from './secound-page-container/charts/charts.component';
import { TablesComponent } from './secound-page-container/tables/tables.component';

const routes: Routes = [
  // 根路径对应StartPageContainer
  { path: '', component: StartPageContainerComponent },
  // 独立的根路由页面
  { path: 'price', component: PriceComponent },
  { path: 'about', component: AboutComponent },
  // 共享SecondPageContainer的路由组
  {
    path: '', // 空路径作为父路由，不会增加URL层级
    component: SecondPageContainerComponent,
    children: [
      { path: 'dashboard', component: DashboardComponent },
      { path: 'charts', component: ChartsComponent },
      { path: 'tables', component: TablesComponent }
    ]
  },
  // 404重定向到首页
  { path: '**', redirectTo: '' }
];

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

2. 容器组件模板（secound-page-container.component.html）：
   一定要在容器模板中添加<router-outlet>，否则子组件无法渲染：

<!-- 这里可以放容器的公共布局，比如侧边栏、导航栏 -->
<div class="container-layout">
  <!-- 子组件会渲染在这里 -->
  <router-outlet></router-outlet>
</div>

方案二：懒加载容器模块（推荐大型项目） #

如果你的SecondPageContainer相关组件较多，推荐用懒加载优化首屏加载速度：

1. 创建容器模块及路由：
   先创建SecondPageContainerModule和对应的路由文件secound-page-container-routing.module.ts：

// secound-page-container-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SecondPageContainerComponent } from './secound-page-container.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ChartsComponent } from './charts/charts.component';
import { TablesComponent } from './tables/tables.component';

const routes: Routes = [
  {
    path: '', // 相对于父路由的路径，父路由是根路径，所以直接映射到根层级
    component: SecondPageContainerComponent,
    children: [
      { path: 'dashboard', component: DashboardComponent },
      { path: 'charts', component: ChartsComponent },
      { path: 'tables', component: TablesComponent }
    ]
  }
];

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

然后在容器模块中导入路由和声明组件：

// secound-page-container.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SecondPageContainerComponent } from './secound-page-container.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ChartsComponent } from './charts/charts.component';
import { TablesComponent } from './tables/tables.component';
import { SecondPageContainerRoutingModule } from './secound-page-container-routing.module';

@NgModule({
  declarations: [
    SecondPageContainerComponent,
    DashboardComponent,
    ChartsComponent,
    TablesComponent
  ],
  imports: [
    CommonModule,
    SecondPageContainerRoutingModule
  ]
})
export class SecondPageContainerModule { }

2. 根路由配置懒加载：
   修改app-routing.module.ts，用loadChildren懒加载容器模块：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { StartPageContainerComponent } from './start-page-container/start-page-container.component';
import { PriceComponent } from './price/price.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: StartPageContainerComponent },
  { path: 'price', component: PriceComponent },
  { path: 'about', component: AboutComponent },
  // 懒加载SecondPageContainer模块
  { path: '', loadChildren: () => import('./secound-page-container/secound-page-container.module').then(m => m.SecondPageContainerModule) },
  { path: '**', redirectTo: '' }
];

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

为什么你的之前方案不行？ #

• 方案一：你把dashboard作为父路由的path，它的children路径会自动嵌套在dashboard/层级下，所以会生成/dashboard/charts这种URL，不符合需求。
• 方案二：用children但同样嵌套了父路径，本质和方案一的问题一样，都是给子路由加了额外的层级。

而我们的方案是把共享容器的路由组放在空路径的父路由下，这样它的children路径直接挂载在根路径下，不会增加URL层级，同时所有子路由都会共享同一个容器组件。

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