Angular router.navigate在子路由中仅生效一次问题排查

问题重现 #

父组件通过以下函数处理子路由导航：

viewRoute(path: string) {
    console.log(path)
    this.router.navigate([`./${path}`], {
        relativeTo: this.route,
        state: this.profile,
    });
}

页面刷新后该函数仅第一次调用生效，后续调用能打印path日志，但navigate无报错也不跳转，启用路由追踪后第二次调用无任何输出。

路由配置如下：

const routes: Routes = [
    {
        path: '',
        component: ProjectsListPage,
        children: [
            {
                path: '',
                loadChildren: () =>
                    import('@projects/modules/projects-list/pages/verified-assets/verified-assets.module')
                    .then((m) => m.VerifiedAssetsModule),
            },
            {
                path: 'solar',
                loadChildren: () =>
                    import('@projects/modules/projects-list/pages/solar/solar.module')
                    .then((m) => m.SolarPageModule),
            },
            {
                path: 'asset-backed',
                loadChildren: () =>
                    import('@projects/modules/projects-list/pages/asset-backed/asset-backed.module')
                    .then((m) => m.AssetBackedPageModule),
            },
            {
                path: 'initiatives',
                loadChildren: () =>
                    import('@projects/modules/projects-list/pages/initiatives/initiatives.module')
                    .then((m) => m.InitiativesPageModule),
            },
            {
                path: 'all',
                loadChildren: () =>
                    import('@projects/modules/projects-list/pages/all/all.module')
                    .then((m) => m.AllPageModule),
            },
        ],
    },
];

核心原因 #

1. 相对路由解析上下文错误：第一次导航后，当前激活路由切换到子路由层级，此时使用./${path} + relativeTo: this.route（父组件的ActivatedRoute），Angular会尝试从父路由的当前子路由节点下解析相对路径，而父路由的子路由中不存在当前子路由/path的配置，导致导航被静默忽略。
2. 子模块路由配置不规范：若懒加载子模块的路由未设置path: ''，会导致最终路由路径叠加（如父路由solar + 子模块路由solar形成/solar/solar），引发路径匹配失败。

解决方案 #

方案1：简化相对路径解析 #

去掉./前缀，直接基于父路由节点解析子路径：

viewRoute(path: string) {
    console.log(path);
    this.router.navigate([path], {
        relativeTo: this.route,
        state: this.profile,
    });
}

方案2：使用绝对路径导航 #

直接指定根路由下的子路径，避免相对路径解析歧义：

viewRoute(path: string) {
    console.log(path);
    this.router.navigate([path], { state: this.profile });
}

方案3：修正子模块路由配置 #

确保每个懒加载子模块的路由使用RouterModule.forChild，且路由路径设为''，匹配父路由的子路径：

// SolarPageModule中的路由配置示例
const routes: Routes = [
    { path: '', component: SolarPage }
];

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

方案4：捕获导航结果排查问题 #

添加Promise回调，明确查看导航状态：

viewRoute(path: string) {
    console.log(path);
    this.router.navigate([path], { relativeTo: this.route, state: this.profile })
        .then(success => console.log('导航状态:', success))
        .catch(err => console.error('导航错误:', err));
}

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