Angular 6多级路由配置问题：子路由匹配失败解决方案咨询

我来帮你搞定这个Angular多级路由的问题！你遇到的「Cannot match any routes」报错，核心原因是子路由没有正确关联到父路由上，而且模块化拆分的方式需要调整一下。下面是完全符合你需求的修改方案，既能单独拆分overview的路由，又能解决访问报错的问题：

1. 确认OverviewComponent模板的路由出口 #

这一步你已经完成了，再确认下模板代码确保没问题：

<!-- overview.component.html -->
<p>Overview 主内容区域</p>
<router-outlet></router-outlet> <!-- 子路由的渲染出口 -->

2. 模块化拆分overview的子路由 #

单独创建一个路由文件（比如overview-routing.module.ts），把overview相关的路由逻辑完全抽离出来，实现模块化管理：

// overview-routing.module.ts
import { Routes, RouterModule, NgModule } from '@angular/router';
import { OverviewComponent } from './overview.component';
import { RegComponent } from './reg.component'; // 导入你的Reg组件

// 定义overview的嵌套路由
export const overviewRoutes: Routes = [
  {
    path: '', // 这里path为空，因为父路由已经是`dashboard/overview`
    component: OverviewComponent,
    children: [
      { path: 'reg', component: RegComponent }, // 对应路径：dashboard/overview/reg
      // 可选：默认重定向到reg，访问dashboard/overview时自动跳转到dashboard/overview/reg
      { path: '', redirectTo: 'reg', pathMatch: 'full' }
    ]
  }
];

// 封装成路由模块，方便导入到dashboard路由中
@NgModule({
  imports: [RouterModule.forChild(overviewRoutes)],
  exports: [RouterModule]
})
export class OverviewRoutingModule { }

3. 修改dashboardRoutes，关联overview的子路由 #

在dashboard的路由配置中，把overviewRoutes作为子路由嵌套进去，而不是单独定义：

// dashboard-routing.module.ts
import { Routes, RouterModule, NgModule } from '@angular/router';
import { DashboardComponent } from './dashboard.component';
import { UserComponent } from './user.component';
import { overviewRoutes } from './overview-routing.module'; // 导入overview的路由配置

export const dashboardRoutes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    children: [
      { path: 'user', component: UserComponent }, // 一级子路由：dashboard/user
      // 关联overview的子路由，path对应父路由路径`overview`
      { path: 'overview', children: overviewRoutes }
    ]
  }
];

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

为什么之前会报错？ #

你之前的问题应该是没有把overviewRoutes嵌套在dashboardRoutes的overview路由的children属性里，Angular无法识别dashboard/overview/reg这个嵌套路径——它不知道overview路由下还有子路由层级，自然会抛出匹配失败的错误。

额外优化建议 #

如果项目规模较大，推荐用懒加载方式加载overview模块，这会让路由配置更符合Angular模块化最佳实践：

// 修改dashboardRoutes中的overview路由
{ 
  path: 'overview', 
  loadChildren: () => import('./overview/overview.module').then(m => m.OverviewModule) 
}

此时只需要在OverviewModule中导入OverviewRoutingModule即可，无需在dashboard路由中直接导入overviewRoutes。

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