Angular路由配置：默认加载CComponent与命名路由出口AComponent

咱们先来梳理下问题的核心：

• 你希望应用初始加载时，主无名router-outlet显示CComponent，同时命名router-outlet「search-results」自动加载AComponent
• 当前配置下，根路径''只会匹配到CComponent，不会触发子路由'a'，所以命名出口是空的
• 改成空子路由后，pathMatch的匹配规则会导致routerLinkActive失效——空路径会被所有前缀路径匹配，而且切换路由时会出现冲突

正确的路由配置方案 #

我们可以通过添加一个空路径的子路由处理初始加载的命名路由，同时保留原有的'a'和'b'子路由用于切换，这样既能满足初始显示需求，又能保证routerLinkActive正常工作：

RouterModule.forRoot([
  { 
    path: '', 
    pathMatch: 'prefix', 
    component: CComponent, 
    children: [
      // 初始加载时，自动将AComponent加载到命名出口
      { 
        path: '', 
        pathMatch: 'full',
        component: AComponent, 
        outlet: 'search-results' 
      },
      // 用于切换的A路由
      { path: 'a', component: AComponent, outlet: 'search-results' },
      // 用于切换的B路由
      { path: 'b', component: BComponent, outlet: 'search-results' }
    ] 
  }
])

为什么这样可行？ #

1. 初始加载匹配：访问根路径''时，父路由加载CComponent，同时空路径的子路由（path: '', pathMatch: 'full'）会精准匹配，将AComponent加载到search-results命名出口，满足初始显示需求。
2. 路由切换正常：点击A/B的routerLink时，会分别匹配'a'和'b'的子路由，替换命名出口的组件；而且routerLinkActive会正确识别当前激活的路由——因为路径是明确的'a'/'b'，不会和空路径的前缀匹配冲突。
3. 避免routerLinkActive失效：空路径的子路由设置了pathMatch: 'full'，只有当路径完全等于''时才会匹配，不会干扰'a'/'b'路由的高亮状态。

额外注意点 #

• 确保你的CComponent模板中包含主无名router-outlet和命名router-outlet，比如：

  <!-- CComponent的模板示例 -->
  <div>我是CComponent的内容</div>
  <router-outlet></router-outlet>
  <router-outlet name="search-results"></router-outlet>
  

• 你当前的routerLink写法是正确的，不需要修改：

  <h3 [routerLink]="[{ outlets: { 'search-results': ['a'] } }]" class="tab" routerLinkActive="active">A</h3>
  <h3 [routerLink]="[{ outlets: { 'search-results': ['b'] } }]" class="tab" routerLinkActive="active">B</h3>
  

这样配置后，应用初始加载时C和A都会正确显示，切换A/B时routerLinkActive也能正常高亮，完全符合你的需求。

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