如何修复Angular相对子路由重复嵌套问题？附示例链接

你遇到的这个inner/(inner)路由重复嵌套的问题，其实是Angular多层懒加载场景下，相对路由解析逻辑导致的典型问题。当你第二次点击inner路由时，Angular会基于当前已经激活的inner路由节点，再次拼接相对路径，最终就出现了这种重复嵌套的异常。

下面给你两个针对性的修复方案，你可以根据自己的路由结构选择：

方案1：修正嵌套路由的配置结构 #

首先看你的HomeInnerRoutingModule，如果这个模块是被懒加载到/home/inner路径下，那么它的根路由应该匹配空路径，不需要再定义同级的inner路由。如果需要在HomeInner内部嵌套子路由，应该用children数组来组织：

修改HomeInnerRoutingModule的路由配置：

const routes: Routes = [
  // 匹配 /home/inner 这个父路径
  { 
    path: '', 
    component: HomeInnerComponent,
    // 如果需要嵌套子路由，统一放在children数组里
    children: [
      // 示例：匹配 /home/inner/sub 这样的子路由
      { path: 'sub', component: SomeSubComponent }
    ]
  }
];

这样配置后，HomeInnerComponent会作为/home/inner的宿主组件，后续的子路由也会正确嵌套在它下面，不会出现重复拼接的问题。

方案2：规范导航时的路径写法 #

如果你是通过组件内的代码（比如router.navigate）来跳转路由，要注意相对导航的上下文：

• 如果是从HomeComponent跳转到HomeInner，建议使用绝对路径，避免相对路径的解析歧义：

  this.router.navigate(['/home/inner']);
  

• 如果一定要用相对路径，要明确指定相对的路由节点（比如基于父路由），而不是默认的当前路由：

  this.router.navigate(['inner'], { relativeTo: this.route.parent });
  

避免在已经处于/home/inner路径时，再次用相对路径['inner']导航，这会让Angular把它拼接到当前路由后面，变成/home/inner/inner，也就是你看到的inner/(inner)。

额外优化：添加pathMatch: 'full'避免部分匹配 #

在HomeRoutingModule的根路由配置里添加pathMatch: 'full'，确保Angular只会在完全匹配空路径时才渲染HomeComponent，避免和子路由的空路径匹配混淆：

const routes: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' },
  { path: 'inner', loadChildren: () => import('./home-inner/home-inner.module').then(m => m.HomeInnerModule) }
];

按照上面的步骤修改后，重复点击inner路由就不会再出现inner/(inner)的异常了。

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