没问题！我来帮你理清楚怎么配置路由实现你的需求，顺便拆解下命名路由出口和子路由的工作逻辑。

首先先明确两个核心概念，帮你理清困惑：

• 命名路由出口：默认的<router-outlet>是无名称的，只能对应一个组件。你需要给出口指定名字，比如<router-outlet name="menu">和<router-outlet name="main">，这样Angular就能区分不同出口要加载的组件。
• 子路由（children）：我们可以把多个路由绑定到同一个父路径下，当访问父路径时，所有匹配的子路由都会生效。这里我们用它来让/page1或/page2同时激活两个命名出口的组件。

第一步：修改AppComponent模板 #

先在你的AppComponent模板里添加两个命名路由出口（可以顺便加上导航链接方便测试）：

<!-- app.component.html -->
<!-- 测试用导航链接 -->
<a routerLink="/page1">跳转到Page1</a>
<a routerLink="/page2">跳转到Page2</a>

<!-- 命名路由出口 -->
<router-outlet name="menu"></router-outlet>
<router-outlet name="main"></router-outlet>

第二步：配置路由模块 #

接下来在你的路由模块（比如AppRoutingModule）里配置路由规则：

首先导入需要的组件和路由依赖：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Menu1Component } from './menu1/menu1.component';
import { Main1Component } from './main1/main1.component';
import { Menu2Component } from './menu2/menu2.component';
import { Main2Component } from './main2/main2.component';

然后定义路由数组：

const routes: Routes = [
  // Page1的路由配置：同时加载Menu1和Main1到对应出口
  {
    path: 'page1',
    children: [
      { 
        path: '', 
        component: Menu1Component, 
        outlet: 'menu' // 指定该组件加载到name为menu的出口
      },
      { 
        path: '', 
        component: Main1Component, 
        outlet: 'main' // 指定该组件加载到name为main的出口
      }
    ]
  },
  // Page2的路由配置：同时加载Menu2和Main2到对应出口
  {
    path: 'page2',
    children: [
      { path: '', component: Menu2Component, outlet: 'menu' },
      { path: '', component: Main2Component, outlet: 'main' }
    ]
  },
  // 默认路由：访问根路径时自动重定向到/page1
  { path: '', redirectTo: '/page1', pathMatch: 'full' }
];

最后在模块中导入并导出路由配置：

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

配置逻辑解释 #

• 当你导航到/page1时，Angular会匹配到path: 'page1'的父路由，然后加载它的两个子路由。因为子路由的path设为空字符串，会直接匹配父路径，同时把两个组件分别渲染到对应的命名出口里。
• 命名出口的核心是outlet字段，必须和模板里<router-outlet name="XXX">的name属性完全一致，Angular才能正确匹配对应关系。

导航方式 #

除了模板里的routerLink，你也可以在组件类中用Router服务手动导航：

// 在组件类中实现导航
import { Router } from '@angular/router';

constructor(private router: Router) {}

goToPage2() {
  this.router.navigate(['/page2']);
}

注意事项 #

• 确保所有用到的组件（Menu1Component、Main1Component等）都已经在你的模块（比如AppModule）的declarations数组中声明了。
• 这个配置完全适配Angular 5，不需要担心版本兼容问题。

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