Angular 官方教程第 12-14 课，完整覆盖了路由启用、路由定义、声明式导航三大核心环节，是构建单页应用（SPA）的基础。这三节课层层递进：先让应用支持路由，再定义 URL 与组件的映射，最后用routerLink实现无刷新跳转，彻底替代原生href。下面用清晰的逻辑、完整代码和关键知识点，帮你一次性吃透这三节内容。
一、第 12 课：启用路由（Enable Routing）—— 搭建路由基础设施
这节课的核心是让 Angular 应用具备路由能力，核心是通过provideRouter注册路由、用RouterOutlet定义组件渲染位置，所有配置通过main.ts统一注入，无需组件与配置直接关联。
1. 核心文件结构（3 个独立 TS 文件，无显式互相依赖）
app.routes.ts：路由规则容器（初始为空）app.config.ts：应用全局配置，注入路由服务app.component.ts：根组件，提供路由出口与导航main.ts：启动入口，绑定根组件 + 路由配置
2. 逐文件完整代码
（1）app.routes.ts —— 路由规则定义文件
初始为空数组，仅定义Routes类型，后续填充具体规则：
typescript
运行
// app.routes.ts
import { Routes } from '@angular/router';
// 空路由表（第12课仅启用路由，不定义具体规则）
export const routes: Routes = [];
（2）app.config.ts —— 全局配置，注入路由
通过provideRouter(routes)将路由服务注册到应用全局：
typescript
运行
// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
// 导入空路由表
import { routes } from './app.routes';
export const appConfig: ApplicationConfig = {
// 核心：provideRouter 启用路由，传入路由规则
providers: [provideRouter(routes)]
};
（3）app.component.ts —— 根组件，提供路由出口
导入RouterOutlet（路由渲染占位符），页面中用<router-outlet />显示匹配的组件：
typescript
运行
// app.component.ts
import { Component } from '@angular/core';
// 导入路由出口指令
import { RouterOutlet } from '@angular/router';
@Component({
selector: 'app-root',
standalone: true,
// 必须声明导入 RouterOutlet
imports: [RouterOutlet],
template: `
<h1>我的Angular应用</h1>
<!-- 路由出口：匹配的组件会渲染在这里 -->
<router-outlet />
`,
})
export class App {}
（4）main.ts —— 启动入口，绑定组件与配置
关键：组件和配置不直接 import，由bootstrapApplication统一绑定：
typescript
运行
// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { App } from './app/app.component';
// 启动：将根组件(App) + 全局配置(appConfig)交给Angular
bootstrapApplication(App, appConfig)
.catch((err) => console.error(err));
3. 第 12 课核心知识点
路由依赖分离：组件（
App）和配置（appConfig）是平行关系，由启动函数绑定，无需互相导入Angular。provideRouter：Angular 独立组件模式下的路由启用方法，替代传统RouterModule.forRoot()。RouterOutlet：路由视图的 “容器”，必须在根组件模板中声明，否则路由组件无法渲染Angular。无刷新路由：启用后，Angular 接管 URL 变化，不再向服务器发请求，仅切换组件。
二、第 13 课：定义路由（Define a Route）—— 绑定 URL 与组件
第 12 课只是 “启用路由”，第 13 课填充路由表，定义/（首页）和/user（用户页）的具体映射，同时配置页面标题。
1. 前提：准备 2 个独立组件
先创建Home和User组件（独立组件，standalone: true）：
home/home.ts
typescript
运行
import { Component } from '@angular/core';
@Component({
selector: 'app-home',
standalone: true,
template: `<h2>首页（Home）</h2>`
})
export class Home {}
user/user.ts
typescript
运行
import { Component } from '@angular/core';
@Component({
selector: 'app-user',
standalone: true,
template: `<h2>用户页（User）</h2>`
})
export class User {}
2. 核心修改：app.routes.ts（填充路由规则）
导入组件，定义Routes数组，每个路由包含path（路径）、component（渲染组件）、title（浏览器标签标题）：
typescript
运行
// app.routes.ts
import { Routes } from '@angular/router';
// 导入要匹配的组件
import { Home } from './home/home';
import { User } from './user/user';
export const routes: Routes = [
// 路由1：根路径 / → 渲染Home组件
{
path: '', // 路径：无需写/，空字符串代表根路径
title: '首页 - Angular路由', // 浏览器标题（自动生效）
component: Home
},
// 路由2：路径 /user → 渲染User组件
{
path: 'user', // 路径：自动拼接为/user
title: '用户页 - Angular路由',
component: User
}
];
3. 第 13 课核心知识点
path规则：空字符串
''= 根路径/（首页）Angular普通字符串
'user'= 路径/user，无需加前缀/Angular
title属性：路由内置配置，跳转时自动更新浏览器标签，无需手动操作 DOMAngular。路由顺序：Angular 按从上到下匹配路由，精确路由放前面，通配路由放最后。
无需修改其他文件：
app.config.ts、app.component.ts、main.ts完全沿用第 12 课代码。
4. 效果验证
访问
/→ 显示 Home 组件，标题为「首页 - Angular 路由」访问
/user→ 显示 User 组件，标题为「用户页 - Angular 路由」组件始终渲染在
<router-outlet />位置。
三、第 14 课：路由导航（Using RouterLink）—— 声明式无刷新跳转
第 13 课已能通过 URL 访问路由，但原生<a href="/">会刷新页面（违背 SPA 理念）。第 14 课核心是用 **routerLink指令 ** 替代href，实现 Angular 内部的声明式导航。
1. 核心修改：app.component.ts（导入 + 使用 RouterLink）
（1）导入 RouterLink 指令
RouterLink和RouterOutlet一样，都来自@angular/router，必须在imports中声明Angular。
（2）用routerLink替代href
语法：routerLink="路径"（绝对路径以/开头，相对路径不加）Angular。
2. 完整修改后代码
typescript
运行
// app.component.ts
import { Component } from '@angular/core';
// 同时导入：路由出口(RouterOutlet) + 导航指令(RouterLink)
import { RouterOutlet, RouterLink } from '@angular/router';
@Component({
selector: 'app-root',
standalone: true,
// 必须同时声明两个路由指令
imports: [RouterOutlet, RouterLink],
template: `
<h1>Angular路由导航</h1>
<!-- 导航栏：用routerLink替代href -->
<nav style="margin: 1rem 0; padding: 1rem; border-bottom: 1px solid #eee;">
<!-- 绝对路径：/ → 首页 -->
<a routerLink="/">首页</a>
<span style="margin: 0 0.5rem;">|</span>
<!-- 绝对路径：/user → 用户页 -->
<a routerLink="/user">用户页</a>
</nav>
<!-- 路由出口 -->
<router-outlet />
`,
})
export class App {}
3. 第 14 课核心知识点
（1）routerLink vs href
表格
（2）routerLink路径规则Angular
绝对路径：以
/开头 →routerLink="/user"→ 始终跳转到/user（推荐）相对路径：不加
/→routerLink="user"→ 基于当前路径拼接（适合子路由）
（3）指令必须导入
RouterLink是 Angular 内置指令，必须在组件imports中声明，否则无法识别Angular。
4. 效果验证
点击导航链接：
页面无刷新切换 Home/User 组件
URL 正常变化（
/↔/user）浏览器标题自动切换
完全符合 SPA 单页应用体验。
四、三节课完整流程总结（一句话串起来）
第 12 课：用
provideRouter启用路由、RouterOutlet定义渲染位置，main.ts绑定组件与配置；第 13 课：在
app.routes.ts中定义path-component-title映射，绑定 URL 与组件；第 14 课：用
RouterLink替代原生href，实现声明式、无刷新的内部导航Angular。
五、关键易错点提醒
组件与配置不直接 import：所有关联靠
main.ts的bootstrapApplication完成Angular；路由路径不加多余
/：path: 'user'≠path: '/user'，后者会报错；路由指令必须导入：
RouterOutlet、RouterLink都要在组件imports中声明Angular；路由顺序：精确路由在前，模糊 / 通配路由在后；
独立组件必备：
Home/User必须设置standalone: true，否则无法路由渲染。
掌握这三节课，你就掌握了 Angular 路由的基础核心：配置、匹配、导航，后续学习路由参数、子路由、守卫等高级功能，都基于这三节的基础逻辑。