第八章：Router —— 园区道路系统，不是简单页面切换按钮

一旦应用不止一个页面，就需要 Router。

在 Angular 里，路由不是零散插件，而是园区级道路和门禁系统：

哪条路通向哪栋楼
哪些路要门禁
哪些路带参数
哪些路有子园区
进入前要不要先做校验或取数

import { Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { DepartmentPageComponent } from './department-page.component';

export const routes: Routes = [
  { path: '', component: HomeComponent, title: '园区首页' },
  { path: 'departments/:id', component: DepartmentPageComponent, title: '部门详情' },
];

根组件里放一个路由出口：

import { Component } from '@angular/core';
import { RouterLink, RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterLink, RouterOutlet],
  template: `
    <header>
      <a routerLink="/">首页</a>
      <a routerLink="/departments/engineering">工程部</a>
    </header>

    <router-outlet />
  `,
})
export class AppComponent {}

这个心智要立住：

text

Router 不只是“切页面”
Router 是“URL -> 当前业务场景 -> 渲染哪栋楼”

所以路由天然适合承载：

页面级边界
懒加载边界
权限边界
数据获取边界
子区域结构边界

这就是为什么 Angular 大型项目会非常依赖 Router 做工程切分。