Angular多router-outlet使用：点击父路由时预加载子路由组件

嘿，这个需求很好实现，只需要调整一下Angular的路由配置，给Beta的子路由加上默认路由即可，具体步骤如下：

1. 配置带有默认重定向的子路由 #

在你的路由配置文件（通常是app-routing.module.ts）里，给Beta路由添加子路由数组，并在其中设置一个空路径的重定向规则，指向actual组件。这样当用户访问/beta路径时，会自动重定向到/beta/actual，同时把Actual组件加载到Beta模板的<router-outlet>里。

示例代码：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AlphaComponent } from './alpha/alpha.component';
import { BetaComponent } from './beta/beta.component';
import { ActualComponent } from './beta/actual/actual.component';
import { ArchiveComponent } from './beta/archive/archive.component';

const routes: Routes = [
  { path: 'alpha', component: AlphaComponent },
  { 
    path: 'beta', 
    component: BetaComponent,
    children: [
      // 关键：默认重定向到actual组件
      { path: '', redirectTo: 'actual', pathMatch: 'full' },
      { path: 'actual', component: ActualComponent },
      { path: 'archive', component: ArchiveComponent }
    ]
  },
  // 可选：添加根路径重定向（如果需要）
  { path: '', redirectTo: 'alpha', pathMatch: 'full' }
];

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

2. 修正Beta模板中的路由链接（可选但推荐） #

你当前Beta模板里的routerLink用了绝对路径（/actual），这会跳转到根路径下的actual，而不是Beta的子路由。建议改成相对路径，这样点击链接时路径会变成/beta/actual和/beta/archive，符合子路由的层级结构：

修改后的Beta模板：

<div>
  <a routerLink="actual">actual</a>
  <a routerLink="archive">archive</a>
</div>
<router-outlet></router-outlet>

原理说明 #

• path: ''匹配进入Beta路由时的空子路径
• redirectTo: 'actual'会把路径重定向到Beta下的actual子路由
• pathMatch: 'full'确保只有当子路径完全为空时才触发重定向，避免和其他子路由规则冲突

这样设置后，当你点击主页的Beta链接时，页面会直接加载Beta组件，同时它内部的<router-outlet>会自动显示Actual组件，完美实现你的需求！

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