命名router-outlet路由应定义在根级还是子级？为何子级配置失效

核心结论 #

命名路由的配置必须和包含该命名router-outlet的组件对应的路由处于同一层级，也就是你这种场景下要放在根级，不能放在该组件路由的子级里。

为什么子级配置无效？ #

Angular路由的匹配逻辑是严格和router-outlet的层级绑定的：

• 子路由的默认规则是：渲染到父路由组件内部的主router-outlet，而不是命名router-outlet。
• 当你把命名路由放在根路由组件的子级时，Angular会误以为这个命名路由的组件要渲染到根路由组件里的主router-outlet，但这个主router-outlet已经被根路由本身的组件占用了，你的命名router-outlet根本没被匹配到，所以组件无法渲染。而URL只是按照路由配置生成，所以会显示正确但页面没变化。

正确与错误配置示例 #

正确的根级配置

const routes: Routes = [
  // 根路由，渲染包含命名router-outlet的组件
  { path: '', component: RootWithNamedOutletComponent },
  // 命名路由，和根路由平级，对应上述组件里的命名出口
  { path: '', component: NamedOutletContentComponent, outlet: 'sidebar' }
];

错误的子级配置（就是你尝试的那种）

const routes: Routes = [
  { 
    path: '', 
    component: RootWithNamedOutletComponent,
    children: [
      // 这里的子路由会找父组件里的主router-outlet，而非命名出口
      { path: '', component: NamedOutletContentComponent, outlet: 'sidebar' }
    ]
  }
];

补充说明 #

如果你的命名router-outlet是在某个子路由渲染的组件里（比如根路由→子路由A，子路由A的组件里有命名outlet），那命名路由才需要和子路由A处于同一层级，比如：

const routes: Routes = [
  { path: '', component: AppComponent },
  { path: 'child', component: ChildWithNamedOutletComponent },
  { path: 'child', component: NamedContentComponent, outlet: 'sidebar' }
];

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