Router 与懒加载

路线图「Routing」：Angular Router 管理 SPA 导航：路由表、routerLink、<router-outlet>、懒加载 与 Guards。对照 React Router 的配置式路由；Next.js 核心 用 文件系统路由，概念不同但 URL → 视图映射一致。

学习目标

• 配置 Routes 与 Standalone 懒加载组件
• 读取动态参数 :slug 与编程式导航
• 用 Route Guard 做登录/权限校验

核心概念

路由表与懒加载

// app.routes.ts
import { Routes } from "@angular/router";

export const routes: Routes = [
  { path: "", loadComponent: () => import("./home/home.component").then(m => m.HomeComponent) },
  {
    path: "tracks/:slug",
    loadComponent: () => import("./track-detail/track-detail.component").then(m => m.TrackDetailComponent),
  },
  { path: "tracks/new", canActivate: [authGuard], loadComponent: () => import("./track-form/track-form.component").then(m => m.TrackFormComponent) },
  { path: "**", redirectTo: "" },
];

模板：<a routerLink="/tracks/angular-roadmap-essentials">进入</a><router-outlet />

参数与 Guard

slug = inject(ActivatedRoute).snapshot.paramMap.get("slug") ?? "";
inject(Router).navigate(["/tracks", "react-essentials"]);

export const authGuard: CanActivateFn = () =>
  localStorage.getItem("token") ? true : inject(Router).createUrlTree(["/login"]);

与 React/Next 对照

	Angular Router	React Router	Next.js App Router
定义	Routes 数组	JSX <Routes>	app/ 目录结构
懒加载	loadComponent	React.lazy	自动 code-split
守卫	CanActivateFn	包装组件	middleware.ts
动态段	:slug	:slug	[slug] 文件夹

练习

• 增加 路由，页面显示参数