路由

Angular Router 是官方客户端路由模块，支持嵌套路由、懒加载、路由守卫与解析器。见 Angular 基础。

配置路由

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

export const routes: Routes = [
  { path: "", redirectTo: "home", pathMatch: "full" },
  { path: "home", loadComponent: () => import("./home/home.component").then((m) => m.HomeComponent) },
  {
    path: "admin",
    canActivate: [authGuard],
    loadChildren: () => import("./admin/admin.routes").then((m) => m.ADMIN_ROUTES),
  },
  { path: "**", loadComponent: () => import("./not-found/not-found.component").then((m) => m.NotFoundComponent) },
];

bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes)],
});

模板导航

html

<a routerLink="/home" routerLinkActive="active">首页</a>
<router-outlet />

import { Router } from "@angular/router";

constructor(private router: Router) {}

goLogin() {
  this.router.navigate(["/login"]);
}

路由守卫

import { CanActivateFn, Router } from "@angular/router";
import { inject } from "@angular/core";

export const authGuard: CanActivateFn = () => {
  const router = inject(Router);
  const isLoggedIn = false; // 示例：应改为 AuthService 的实际逻辑
  if (!isLoggedIn) {
    return router.createUrlTree(["/login"]);
  }
  return true;
};

守卫	时机
`canActivate`	进入路由前
`canDeactivate`	离开路由前（如未保存提示）
`canMatch`	是否匹配该路由配置

路由参数

import { ActivatedRoute } from "@angular/router";

// 快照（仅初始化读一次）
const id = this.route.snapshot.paramMap.get("id");

// 可观察（参数变化时更新）
this.route.paramMap.subscribe((params) => { ... });

Signal 路由输入：withComponentInputBinding() 可将路由参数绑定到 input()（见官方路由指南）。

与 Vue / React Router 对照

	Angular	Vue Router	React Router
出口	`<router-outlet>`	`<RouterView>`	`<Outlet />`
懒加载	`loadComponent` / `loadChildren`	动态 `import()`	`lazy()` + `Suspense`

参考文献

以下链接在编写时均可正常访问：

资料	说明
路由与导航	官方
路由守卫	鉴权
懒加载	代码分割