Angular懒加载模块时能否指定目标路由路径？

首先得明确一个核心逻辑：Angular懒加载子模块时，子模块的所有路由都会自动继承父路由的路径前缀。结合你的场景来看，当你在modulename模块里配置了path: 'register/:id'并懒加载secondomodule，那么secondomodule的路由都是基于/ROUTE1/register/:id这个前缀的——这就是为什么现在访问/ROUTE1/register/:id时，会匹配到secondomodule的空路径组件，而不是你想要的register/:id组件（后者对应的完整路径是/ROUTE1/register/:id/register/:id，显然不是你要的）。

下面给你两种可行的解决思路：

方法一：调整子模块路由（最直接推荐） #

既然父路由已经帮你指定了register/:id的路径前缀，那子模块只需要用空路径来匹配这个前缀即可，把Nomecomponent的路由改成空路径，同时调整路由顺序确保优先匹配：

// secondomodule.routing.ts
const routes: Routes = [
  // 这个路由会直接匹配 /ROUTE1/register/:id
  {
    path: '',
    component: Nomecomponent,
  },
  // 保留原来的默认路由（如果需要），添加pathMatch: 'full'避免冲突
  {
    path: '',
    component: OtherComponent,
    pathMatch: 'full'
  }
];

如果需要在Nomecomponent里获取id参数，直接通过父路由的参数即可：

// Nomecomponent.ts
import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.parent?.params.subscribe(params => {
    const targetId = params['id'];
    // 在这里处理id参数
  });
}

方法二：调整父模块路由结构 #

如果你不想修改子模块的路由，可以重构modulename的路由配置，让懒加载的路径为空，把register/:id的路径定义放在子模块里：

// modulename的路由配置
const routes: Routes = [
  {
    path: '',
    component: modulenameComponent,
  },
  // 父路由仅负责懒加载子模块，路径设为空
  {
    path: '',
    loadChildren: () => import('../../modules/secondomodule/secondomodule.module').then(val => val.secondomodule),
  }
];

// secondomodule的路由配置保持不变
const routes: Routes = [
  {
    path: 'register/:id',
    component: Nomecomponent,
  },
  {
    path: '',
    component: OtherComponent,
  }
];

这种方式下，访问/ROUTE1/register/:id会直接匹配子模块的register/:id路由，显示Nomecomponent；访问/ROUTE1显示modulenameComponent，访问/ROUTE1/（空路径）显示OtherComponent。注意要确保路由顺序正确，避免冲突。

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