Angular中如何配置路由让首页默认选中侧边栏About选项？

一、修改路由配置实现默认导航 #

你的现有路由结构已经具备嵌套层级基础，只需要添加重定向规则，让根路径自动导航到sidebar/about，同时通过pathMatch: 'full'避免模糊匹配引发的问题：

const appRoutes: Routes = [
  { 
    path: '', 
    component: HomeComponent, 
    children: [
      // 访问根路径时，自动重定向到sidebar/about
      { 
        path: '', 
        redirectTo: 'sidebar/about',
        pathMatch: 'full'
      },
      { 
        path: 'sidebar', 
        component: SidebarComponent, 
        children: [
          // 直接访问sidebar路径时，默认重定向到about
          { 
            path: '', 
            redirectTo: 'about',
            pathMatch: 'full'
          },
          { path: 'about', component: AboutComponent },
          { path: 'clients', component: ClientsComponent },
          { path: 'services', component: ServicesComponent },
          { path: 'contact', component: ContactComponent },
          { path: 'datatable', component: DataComponent }
        ] 
      }
    ] 
  }
];

pathMatch: 'full'是关键，它确保只有当路径完全匹配时才触发重定向，避免因模糊匹配导致的路由冲突或意外加载多个组件。

二、确保父组件包含路由出口（Router Outlet） #

Angular嵌套路由的核心是父组件模板必须包含<router-outlet>标签，用来渲染对应的子组件。如果缺少这个标签，子组件无法正常加载，甚至会出现多个组件异常加载的情况：

1. HomeComponent模板（home.component.html）：

<!-- HomeComponent自身的内容 -->
<h1>Home Page</h1>
<!-- 这个出口用来渲染SidebarComponent -->
<router-outlet></router-outlet>

2. SidebarComponent模板（sidebar.component.html）：

<!-- SidebarComponent的侧边栏内容，比如导航菜单 -->
<div class="sidebar-nav">
  <a routerLink="about">About</a>
  <a routerLink="clients">Clients</a>
  <!-- 其他导航链接 -->
</div>
<!-- 这个出口用来渲染About/Clients等子组件 -->
<router-outlet></router-outlet>

三、解决“同时加载多个子组件”的常见问题 #

如果遇到多个子组件被同时加载的异常情况，通常是以下原因导致：

• 缺少pathMatch: 'full'：模糊匹配会让Angular同时命中多个路由规则，引发多组件加载；
• 路由路径冲突：确保子路由路径不会和父路由、其他子路由重叠；
• 命名出口配置错误：无特殊需求时尽量使用默认<router-outlet>，避免命名出口配置失误导致的组件重复加载。

完成以上配置后，用户访问根路径时，Angular会自动按HomeComponent -> SidebarComponent -> AboutComponent的层级加载组件，完美实现你想要的首页默认展示效果。

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