Angular路由配置：如何直接加载子模块中的指定子路由？

你当前的配置核心问题是：当用户访问/horse-racing时，主路由会加载SportModule，但SportModule的子路由会匹配空路径（因为主路由的path: 'horse-racing'已经占用了URL层级），所以会默认显示SportComponent，而非你期望的RacingComponent。

下面提供两种符合Angular路由最佳实践的优雅解决方案，均能保持URL不变并实现需求：

方案一：用路由守卫根据data值动态重定向 #

这种方式通过路由守卫读取主路由传递的game参数，自动重定向到对应子路由，无需修改组件结构。

步骤1：创建路由守卫 #

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, UrlTree, Router } from '@angular/router';
import { GAME } from './your-game-enum-path'; // 替换为你的枚举路径

@Injectable({ providedIn: 'root' })
export class GameRedirectGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot): boolean | UrlTree {
    // 从父路由（主路由）获取传递的game参数
    const game = route.parent?.data['game'] as GAME;
    
    // 根据game值映射到对应子路由路径
    switch(game) {
      case GAME.HORSE_RACING:
        return this.router.parseUrl('horse-racing');
      case GAME.SPORT:
        return this.router.parseUrl(''); // 保持空路径，加载SportComponent
      default:
        return true;
    }
  }
}

步骤2：修改SportModule路由配置 #

在空路径路由上添加守卫，确保进入模块时先执行重定向逻辑：

import { GameRedirectGuard } from './game-redirect.guard';

const ROUTES: Routes = [
  // 先通过守卫判断重定向方向
  { path: '', canActivate: [GameRedirectGuard] },
  // 保留原有路由，支持直接访问/sport/horse-racing
  { path: 'horse-racing', component: RacingComponent },
  { path: '', component: SportComponent }
];

步骤3：主路由配置保持不变 #

你的原有主路由配置无需修改，依然保留data参数传递：

const ROUTES: Routes = [
  { path: 'sport', loadChildren: () => import('./sport/sport.module').then(m => m.SportModule), data: { game: GAME.SPORT } },
  { path: 'horse-racing', loadChildren: () => import('./sport/sport.module').then(m => m.SportModule), data: { game: GAME.HORSE_RACING } }
];

方案二：在空路径组件中根据data值动态切换组件 #

如果不想使用路由守卫，可以直接在空路径组件中根据主路由传递的game参数，动态渲染对应组件。

步骤1：重构原有组件 #

将原来的SportComponent重命名为MainSportComponent（避免命名冲突），然后创建一个新的SportComponent作为空路径的容器组件：

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { GAME } from './your-game-enum-path';

@Component({
  selector: 'app-sport',
  template: `
    <!-- 根据game值渲染对应组件 -->
    <app-racing *ngIf="currentGame === GAME.HORSE_RACING"></app-racing>
    <app-main-sport *ngIf="currentGame === GAME.SPORT"></app-main-sport>
  `
})
export class SportComponent {
  GAME = GAME;
  currentGame: GAME;

  constructor(private route: ActivatedRoute) {
    // 从父路由获取传递的game参数
    this.currentGame = this.route.parent?.data['game'] as GAME;
  }
}

步骤2：修改SportModule路由配置 #

更新路由，让空路径指向新的容器组件：

const ROUTES: Routes = [
  { path: '', component: SportComponent },
  // 可选：保留原有子路由，支持直接访问/sport/horse-racing
  { path: 'horse-racing', component: RacingComponent }
];

步骤3：主路由配置保持不变 #

同样保留原有主路由配置即可。

两种方案都能完美实现你的需求：

• 访问/sport时，显示原SportComponent（现在的MainSportComponent）
• 访问/horse-racing时，直接显示RacingComponent
• URL地址始终保持用户访问时的状态，符合预期体验

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