Angular中如何自动路由到子路由？

我有一个由主app-router模块加载的albums模块。点击导航栏的albums链接时，会进入albums模块的空路径，该路径对应AlbumContainer组件——此组件自带导航和router-outlet，包含dates、artists等子路由。我希望点击主导航的albums时自动路由到dates子路由，但直接在主导航锚点添加子路由URL会导致routerLinkActive失效。请问进入该模块/组件时，能否自动路由到dates路径？其他场景下我会通过子菜单直接链接到子路由。

当前路由配置 #

const routes: Routes = [
  {
    path: '',
    component: AlbumContainer,
    children: [
      {
        path: 'dates',
        loadChildren: () => import('./dates/dates.module').then((mod) => DatesModule)
      },
      {
        path: 'artists',
        loadChildren: () => import('./art/profile.module').then((mod) => mod.ArtistsModule)
      },
    ]
  },
];

参考HTML结构 #

<div>
  <!-- Sub Menu -->
  <div>
     <albums-menu></albums-menu>
  </div>
  <!-- Router Content -->
  <div>
    <router-outlet></router-outlet>
  </div>
</div>

方法1：路由配置添加重定向（推荐） #

在albums模块的路由配置中，给空路径添加重定向规则，访问空路径时自动跳转到dates子路由。这种方式既能实现自动跳转，又能保留主导航routerLinkActive的有效性：

const routes: Routes = [
  {
    path: '',
    component: AlbumContainer,
    children: [
      // 新增重定向规则：空路径直接跳转到dates
      { path: '', redirectTo: 'dates', pathMatch: 'full' },
      {
        path: 'dates',
        loadChildren: () => import('./dates/dates.module').then((mod) => DatesModule)
      },
      {
        path: 'artists',
        loadChildren: () => import('./art/profile.module').then((mod) => mod.ArtistsModule)
      },
    ]
  },
];

点击主导航的albums链接（指向/albums）时，会自动重定向到/albums/dates，而routerLinkActive会默认匹配所有以/albums开头的路径，因此主导航的激活状态正常生效。

方法2：组件内主动导航 #

如果不想修改路由配置，可以在AlbumContainer组件的初始化钩子中，判断当前子路由是否为空，若是则自动导航到dates：

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-album-container',
  templateUrl: './album-container.component.html',
  styleUrls: ['./album-container.component.css']
})
export class AlbumContainerComponent implements OnInit {
  constructor(private router: Router, private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 若当前没有激活的子路由，则导航到dates
    if (!this.route.firstChild) {
      this.router.navigate(['dates'], { relativeTo: this.route });
    }
  }
}

这种方法适合需要根据业务条件动态决定是否跳转的场景。

方法3：调整routerLinkActive匹配策略 #

如果坚持直接在主导航链接中使用/albums/dates，可以给routerLinkActive添加非精确匹配配置，让它匹配所有以/albums开头的路径：

<!-- 主导航的albums链接示例 -->
<a 
  routerLink="/albums/dates" 
  routerLinkActive="active" 
  [routerLinkActiveOptions]="{ exact: false }"
>
  Albums
</a>

不过这种方式需要修改主导航的链接配置，相比前两种方法，重定向的设计更符合模块路由的逻辑。

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