Angular懒加载模块下嵌套子路由跳转失效问题求解

云上老周

2026-10-3

Angular多模块懒加载路由跳转失败问题解决方案

问题根因及修复方案

1. 子路由文件导入语法错误
  你的m2.routes.ts文件中导入CComponent的语句存在笔误，重复导入了BComponent：
```
// 错误写法
import { BComponent } from "./c.component";
```
这会导致CComponent未被正确导入，路由配置中path: 'c'对应的组件无效，路由匹配时会命中后续的通配符**规则，默认渲染BComponent，这是你访问c路径也显示B组件的核心原因。
修复方法：修正导入语句即可
```
import { CComponent } from "./c.component";
```
1. routerLink绝对路径匹配错误
  你在b.component.html中使用的routerLink="/b"、routerLink="/c"属于根路径绝对路由，会直接从应用顶层路由开始匹配。但你的顶层路由仅配置了module1、module2两个路径，没有/b、/c的定义，所以会命中顶层路由的通配符**规则，重定向到module1页面，这是点击跳转后跳转到ModuleOne的原因。
  修复方法：使用相对路径写法，去掉路径开头的斜杠：
```
<div routerLink="b">
  <i class="material-icons">local_shipping</i>
  <span>B</span>
</div>
<div routerLink="c">
  <i class="material-icons">file_download</i>
  <span>C</span>
</div>
```
相对路径会基于当前激活的父路由（也就是ModuleTwo对应的挂载路径）拼接，生成正确的子路由地址。
1. 路由路径认知偏差
  按照你给出的顶层路由配置，ModuleTwo的挂载路径是/module2，加上ModuleTwo内部的根路由是空path对应AComponent，所以A组件的正确访问路径是/module2，而非你描述的/a。如果你的实际访问路径/a确实能加载A组件，说明你实际的顶层路由配置中将ModuleTwo的path设置为了a，这种情况下相对路径的写法依旧生效，最终正确的子路由路径为/a/b、/a/c。
1. 额外配置误区说明
  你之前尝试将子路由的path从"b"改为"/b"是无效的，Angular中子路由的path默认是相对父路由的，开头加斜杠会变成绝对路径，反而无法和父路由拼接匹配，子路由配置不需要加前缀斜杠。