Angular 路由：RouterModule 配置

Angular 路由是单页应用（SPA）的核心机制，负责管理 URL 与组件之间的映射关系。通过配置 RouterModule，开发者可以实现页面无刷新跳转、模块懒加载以及复杂的权限控制。以下是配置 RouterModule 的完整操作指南。

基础配置：定义路由与注册模块

配置路由的第一步是定义 URL 路径与对应组件的映射关系，并将其注册到根模块中。

1. 创建路由配置文件。
   在 src/app 目录下新建文件 app-routing.module.ts（如果项目中不存在）。

2. 定义路由常量。
   在文件中引入 Routes 和 RouterModule，并创建一个 routes 数组。每个路由对象都是一个映射规则。

   import { NgModule } from '@angular/core';
   import { RouterModule, Routes } from '@angular/router';
   import { HomeComponent } from './home/home.component';
   import { AboutComponent } from './about/about.component';
   
   // 定义路由规则
   const routes: Routes = [
     { path: 'home', component: HomeComponent },
     { path: 'about', component: AboutComponent },
     // 默认重定向到 home
     { path: '', redirectTo: '/home', pathMatch: 'full' },
     // 通配符路由，处理 404 情况
     { path: '**', component: HomeComponent } 
   ];
   
   @NgModule({
     imports: [RouterModule.forRoot(routes)],
     exports: [RouterModule]
   })
   export class AppRoutingModule { }

3. 注册路由模块。
   打开根模块文件 src/app/app.module.ts，引入 AppRoutingModule 并将其添加到 imports 数组中。

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { AppRoutingModule } from './app-routing.module'; // 引入路由模块
   
   @NgModule({
     declarations: [
       // ...组件声明
     ],
     imports: [
       BrowserModule,
       AppRoutingModule // 注册路由模块
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }

模板配置：添加路由出口与导航

路由配置完成后，需要在 HTML 模板中指定组件显示的位置，并提供导航触发方式。

1. 添加路由出口。
   打开 src/app/app.component.html，删除默认内容，输入 <router-outlet></router-outlet> 标签。

   • 该标签是 Angular 路由的占位符，匹配到的组件将在此处渲染。

2. 配置导航链接。
   在页面顶部（或任意位置）添加导航菜单。使用 routerLink 指令替代传统的 href 属性，以避免页面整体刷新。

   <nav>
     <!-- 绝对路径导航 -->
     <a routerLink="/home">首页</a>
     <a routerLink="/about">关于我们</a>
   </nav>
   
   <!-- 路由内容渲染区域 -->
   <router-outlet></router-outlet>

进阶配置：路由参数传递

在实际业务中，经常需要根据 URL 中的参数（如商品 ID）加载数据。路由参数主要分为两类：必需参数和可选参数（查询参数）。

1. 定义带参数的路由。
   修改 routes 数组，在 path 中使用冒号 : 声明参数。

   const routes: Routes = [
     // :id 是一个动态参数，例如 /product/123
     { path: 'product/:id', component: ProductDetailComponent }
   ];

2. 生成带参数的链接。
   在模板中，有两种方式传递参数：

   • 方式一：路由参数（路径参数）

     <!-- 点击后跳转到 /product/100 -->
     <a [routerLink]="['/product', 100]">查看商品 100</a>

   • 方式二：查询参数（Query Parameters，如 ?page=1）

     <!-- 点击后跳转到 /product/100?category=book -->
     <a [routerLink]="['/product', 100]" [queryParams]="{ category: 'book' }">
       查看书籍详情
     </a>

3. 获取参数数据。
   在目标组件（如 ProductDetailComponent）中，注入 ActivatedRoute 服务来读取参数。

   import { Component, OnInit } from '@angular/core';
   import { ActivatedRoute } from '@angular/router';
   
   @Component({ ... })
   export class ProductDetailComponent implements OnInit {
     constructor(private route: ActivatedRoute) {}
   
     ngOnInit() {
       // 获取路由参数 (如 100)
       this.route.paramMap.subscribe(params => {
         const id = params.get('id');
         console.log('商品 ID:', id);
       });
   
       // 获取查询参数 (如 book)
       this.route.queryParamMap.subscribe(params => {
         const category = params.get('category');
         console.log('分类:', category);
       });
     }
   }

性能优化：路由懒加载

对于大型应用，一次性加载所有模块会导致首屏缓慢。RouterModule 支持通过懒加载按需加载模块。

1. 创建特性模块。
   假设执行命令 ng generate module user --routing 生成了用户模块及其路由文件 user-routing.module.ts。

2. 配置懒加载语法。
   修改根路由配置文件 app-routing.module.ts，移除直接导入组件的方式，改用 loadChildren 动态导入。

   const routes: Routes = [
     { path: 'home', component: HomeComponent },
     {
       path: 'user',
       // 动态加载 UserModule
       loadChildren: () => import('./user/user.module').then(m => m.UserModule)
     }
   ];

3. 配置子路由。
   打开 src/app/user/user-routing.module.ts，配置该模块下的具体路由。注意这里不需要再使用 forRoot，而是使用 forChild。

   import { NgModule } from '@angular/core';
   import { RouterModule, Routes } from '@angular/router';
   import { ProfileComponent } from './profile/profile.component';
   
   const routes: Routes = [
     // 这里的路径是相对于父级 /user 的
     { path: 'profile', component: ProfileComponent } 
   ];
   
   @NgModule({
     imports: [RouterModule.forChild(routes)],
     exports: [RouterModule]
   })
   export class UserRoutingModule { }

   此时，访问 /user/profile 会触发 Angular 自动下载并加载 UserModule。

路由配置核心属性速查表

以下表格列出了 Routes 配置对象中常用的属性及其说明。

路由匹配流程逻辑

当用户点击链接或手动修改浏览器地址栏时，Angular 路由器会执行以下逻辑来决定显示哪个页面。