Angular页面跳转01，深入浅出 Angular Router：RouterModule 配置与路由出口核心解析
在单页应用（SPA）开发中，路由是连接不同页面视图的核心桥梁。Angular 作为成熟的前端框架，提供了功能强大的@angular/router模块，让开发者能优雅地实现页面导航、视图切换。本文将聚焦 Angular Router 的两大基础核心 ——RouterModule配置与<router-outlet>路由出口，帮你从零掌握 Angular 路由的核心用法。
一、前置准备：环境与依赖
在开始配置路由前，确保你的 Angular 项目已引入路由模块：
- 新建项目时选择启用路由（
ng new my-app --routing）； - 若已有项目，手动安装并导入：
npm install @angular/router --save二、核心概念：RouterModule—— 路由的 “总配置中心”
RouterModule是 Angular 路由的核心模块，负责定义路由规则、注册路由表、提供路由相关服务（如Router、ActivatedRoute）。它的核心作用是将路由规则与应用根模块 / 特性模块关联，让 Angular 知道 “哪个 URL 对应哪个组件”。
2.1 基础配置步骤
步骤 1：定义路由数组（Routes）
路由数组是一个包含多个Route对象的数组，每个Route对象描述 “URL 路径” 与 “对应组件” 的映射关系，核心属性包括：
path：URL 路径（字符串，如'home'、''代表默认路由）；component：路径匹配时要渲染的组件；pathMatch：路径匹配策略（默认'prefix'，默认路由需设为'full'）；redirectTo：重定向目标路径（配合pathMatch使用）。
示例：
// app-routing.module.ts import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; // 导入需要路由的组件 import { HomeComponent } from './home/home.component'; import { AboutComponent } from './about/about.component'; import { NotFoundComponent } from './not-found/not-found.component'; // 定义路由规则数组 const routes: Routes = [ // 默认路由：访问根路径时重定向到home { path: '', redirectTo: 'home', pathMatch: 'full' }, // 普通路由：路径/home对应HomeComponent { path: 'home', component: HomeComponent }, // 普通路由：路径/about对应AboutComponent { path: 'about', component: AboutComponent }, // 通配符路由：匹配所有未定义的路径（需放在最后） { path: '**', component: NotFoundComponent } ];步骤 2：注册 RouterModule
通过RouterModule.forRoot()（根模块）或RouterModule.forChild()（特性模块）注册路由数组，将路由配置注入应用：
@NgModule({ imports: [ // forRoot：根模块专用，创建全局路由服务和指令 RouterModule.forRoot(routes) // 特性模块使用 forChild：RouterModule.forChild(featureRoutes) ], // 导出RouterModule，让根模块的模板能使用路由指令（如routerLink） exports: [RouterModule] }) export class AppRoutingModule { }关键说明：
forRoot()：仅在根模块（AppModule）中调用一次，负责创建全局的Router服务实例，避免重复注入；forChild()：在特性模块（如 UserModule）中调用，仅注册路由规则，复用根模块的Router服务。
三、核心载体：<router-outlet>—— 路由视图的 “容器”
配置好路由规则后，Angular 需要知道 “匹配的组件该渲染到哪里”，<router-outlet>就是这个核心载体 —— 它是一个内置指令，作为路由组件的 “占位符”，Angular 会将匹配到的组件模板渲染到这个位置。
3.1 基本使用
在根组件（如AppComponent）的模板中添加<router-outlet>，这是最基础的路由出口：
<!-- app.component.html --> <!-- 导航栏：使用routerLink指令实现路由跳转 --> <nav> <a routerLink="/home" routerLinkActive="active">首页</a> <a routerLink="/about" routerLinkActive="active">关于我们</a> </nav> <!-- 路由出口：匹配的组件将渲染到这里 --> <router-outlet></router-outlet>3.2 关键特性
1. 嵌套路由出口
Angular 支持嵌套路由，此时需要在父组件模板中添加<router-outlet>作为子路由的容器。例如：
// 定义嵌套路由 const routes: Routes = [ { path: 'user', component: UserComponent, // 父组件 children: [ { path: 'profile', component: UserProfileComponent }, // 子路由1 { path: 'settings', component: UserSettingsComponent } // 子路由2 ] } ];<!-- user.component.html（父组件模板） --> <h2>用户中心</h2> <nav> <a routerLink="profile">个人资料</a> <a routerLink="settings">账户设置</a> </nav> <!-- 子路由出口：UserProfile/Settings组件将渲染到这里 --> <router-outlet></router-outlet>2. 命名路由出口（多视图）
默认的<router-outlet>是匿名的，若需要在同一页面渲染多个路由组件，可使用命名出口：
<!-- 命名出口：primary是默认出口，sidebar是自定义出口 --> <router-outlet></router-outlet> <router-outlet name="sidebar"></router-outlet>对应的路由配置：
const routes: Routes = [ { path: 'dashboard', component: MainDashboardComponent, // 渲染到默认出口 outlet: 'primary' // 可省略，默认primary }, { path: 'stats', component: SidebarStatsComponent, // 渲染到sidebar出口 outlet: 'sidebar' } ];跳转命名出口路由的方式：
<a [routerLink]="[{ outlets: { primary: 'dashboard', sidebar: 'stats' } }]"> 查看仪表盘 </a>四、完整示例：从配置到渲染的完整流程
1. 项目结构
src/ ├── app/ │ ├── home/ │ │ ├── home.component.ts │ │ └── home.component.html │ ├── about/ │ │ ├── about.component.ts │ │ └── about.component.html │ ├── not-found/ │ │ ├── not-found.component.ts │ │ └── not-found.component.html │ ├── app-routing.module.ts # 路由配置 │ ├── app.component.ts # 根组件 │ └── app.component.html # 根模板（包含router-outlet）2. 运行效果
- 访问
http://localhost:4200：重定向到/home，<router-outlet>渲染HomeComponent； - 点击 “关于我们”：URL 变为
/about，<router-outlet>替换为AboutComponent； - 访问
http://localhost:4200/xxx：渲染NotFoundComponent。
五、常见问题与注意事项
- 路由顺序问题：Angular 路由按数组顺序匹配，通配符路由（
**）必须放在最后，否则会覆盖前面的路由； - 默认路由的 pathMatch：默认路由
{ path: '', redirectTo: 'home' }必须添加pathMatch: 'full'，否则 Angular 会以 “前缀匹配” 处理，导致所有路径都重定向； - RouterModule 导出：若根模块模板需要使用
routerLink等指令，必须在AppRoutingModule中导出RouterModule； - 嵌套路由的路径：子路由的
path不要加/，父路由路径 + 子路由路径即为完整 URL（如user/profile）。
总结
RouterModule是 Angular 路由的配置核心，通过forRoot()/forChild()注册路由规则，定义 “URL - 组件” 映射关系；<router-outlet>是路由组件的渲染容器，默认出口对应匿名占位符，支持嵌套和命名出口满足复杂视图需求；- 核心原则：路由规则按顺序匹配，默认路由需设
pathMatch: 'full'，根模块用forRoot()，特性模块用forChild()。
掌握RouterModule配置和<router-outlet>的使用，是解锁 Angular 路由进阶功能（如路由守卫、参数传递、懒加载）的基础。后续我们将继续深入 Angular Router 的高级特性，敬请关注！