Router

Angular Router 为 SPA 提供客户端路由：路由表、routerLink、<router-outlet>。对照 Vue Router 的手写表与 React 核心 的 React Router；本站 platform 用 Next.js 核心 文件系统路由。

学习目标

• 配置 Routes 与懒加载 Standalone 组件
• 使用动态参数与编程式导航
• 理解 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: "**", redirectTo: "" },
];

导航模板：<a routerLink="/tracks/angular-essentials">Angular</a><router-outlet />。

参数与守卫

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"]);
// { path: "admin", canActivate: [authGuard], loadComponent: ... }

	Angular Router	Vue Router	Next.js
定义	Routes 数组	JS 路由表	app/ 目录
懒加载	loadComponent	动态 import	自动
守卫	CanActivateFn	beforeEach	middleware

企业后台 /admin/* 常用守卫；本站 admin 用 Vue，platform 用 Next.js middleware。

练习

• 增加 /lessons/:slug 路由，页面显示 slug 参数
• 为需登录页加 authGuard

小结

下一课表单。