Angular/14 版本的 Router 是 Angular 框架中用于实现单页面应用程序（SPA）路由的核心组件。它允许你定义应用程序的路由配置，并能够根据用户的导航请求动态地渲染不同的组件。

主要特性

  • 声明式路由：通过使用 <router-outlet> 指令来指定组件的挂载点，并通过 <router-link> 指令来定义导航链接。
  • 路由守卫：提供路由守卫机制，可以在路由导航之前执行权限验证或其他逻辑。
  • 懒加载路由：支持路由组件的懒加载，以优化应用程序的加载性能。

使用方法

  1. 定义路由：在 app-routing.module.ts 文件中定义路由配置。
  2. 使用 <router-outlet>：在组件模板中添加 <router-outlet> 指令，用于渲染当前路由对应的组件。
  3. 添加导航链接：使用 <router-link> 指令来创建导航链接。
<router-link to="/about">关于我们</router-link>
<router-outlet></router-outlet>

路由守卫

路由守卫分为三种类型：全局守卫、路由独享守卫和组件内守卫。

  • 全局守卫：在所有路由导航之前执行。
  • 路由独享守卫：在特定路由导航之前执行。
  • 组件内守卫：在路由进入或离开当前组件时执行。
import { RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';

const routes: Routes = [
  { path: 'about', component: AboutComponent, canActivate: [AuthGuard] }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

扩展阅读

更多关于 Angular Router 的信息，请访问 Angular Router 官方文档。

Angular Router