企业官网建设流程全解析

路由是单页应用（SPA）的核心骨架，Angular 作为成熟的前端框架，提供了强大且灵活的路由系统。本文将从实际开发场景出发，详解 Angular 中最常用的三种路由配置方式：静态路由、动态路由（带参数:id）和通配符路由，帮助你快速掌握路由配置的核心要点。

一、前置准备：路由基础环境搭建

在开始配置路由前，需确保已完成 Angular 路由的基础初始化（适用于 Angular 14 + 版本）：

1. 创建带路由的 Angular 项目

# 新建项目时直接启用路由，样式可选css/scss等 ng new angular-router-demo --routing --style=css cd angular-router-demo

2. 创建示例组件（用于路由演示）

# 静态路由组件 ng generate component pages/home ng generate component pages/about # 动态路由组件（详情页） ng generate component pages/detail # 404页面（通配符路由用） ng generate component pages/not-found

3. 核心路由模块说明

Angular 路由的核心配置文件是app-routing.module.ts，所有路由规则都定义在Routes数组中，通过RouterModule.forRoot()注册到根模块。

二、静态路由：固定路径的基础路由

静态路由是最基础的路由类型，路径为固定字符串，适用于首页、关于页等无需动态参数的页面。

1. 配置示例

修改app-routing.module.ts：

import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; // 导入创建的组件 import { HomeComponent } from './pages/home/home.component'; import { AboutComponent } from './pages/about/about.component'; import { DetailComponent } from './pages/detail/detail.component'; import { NotFoundComponent } from './pages/not-found/not-found.component'; // 路由规则数组 const routes: Routes = [ // 静态路由：首页 { path: 'home', component: HomeComponent }, // 静态路由：关于页 { path: 'about', component: AboutComponent }, // 路由重定向：默认跳转到首页 { path: '', redirectTo: '/home', pathMatch: 'full' } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

2. 模板中使用静态路由

在app.component.html中添加路由出口和导航：

<!-- 路由导航 --> <nav> <a routerLink="/home" routerLinkActive="active">首页</a> <a routerLink="/about" routerLinkActive="active">关于我们</a> </nav> <!-- 路由出口：匹配的组件将渲染在这里 --> <router-outlet></router-outlet>

3. 核心要点

• 静态路由的path是固定字符串，无动态参数；
• redirectTo用于默认路由跳转，需配合pathMatch: 'full'确保完全匹配空路径；
• routerLink用于模板中跳转路由，routerLinkActive可标记当前激活的路由。

三、动态路由：带参数（:id）的灵活路由

动态路由（参数化路由）通过:参数名定义可变路径，适用于详情页、用户页等需要根据 ID 展示不同内容的场景。

1. 配置示例

在routes数组中添加动态路由：

const routes: Routes = [ // 静态路由 { path: 'home', component: HomeComponent }, { path: 'about', component: AboutComponent }, // 动态路由：:id 是动态参数，可自定义名称（如:productId） { path: 'detail/:id', component: DetailComponent }, // 默认重定向 { path: '', redirectTo: '/home', pathMatch: 'full' } ];

2. 跳转动态路由

方式 1：模板中跳转（传递参数）

<!-- 传递固定参数 --> <a routerLink="/detail/1">商品1详情</a> <a routerLink="/detail/2">商品2详情</a> <!-- 传递动态变量（假设组件中有product.id） --> <a [routerLink]="['/detail', product.id]">商品详情</a>

方式 2：组件中通过 Router 服务跳转

在home.component.ts中编程式跳转：

import { Component } from '@angular/core'; import { Router } from '@angular/router'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'] }) export class HomeComponent { constructor(private router: Router) {} // 点击跳转详情页 goToDetail(id: number): void { this.router.navigate(['/detail', id]); } }

3. 获取动态路由参数

在detail.component.ts中获取:id参数：

import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'app-detail', templateUrl: './detail.component.html', styleUrls: ['./detail.component.css'] }) export class DetailComponent implements OnInit { currentId: string | null = null; // 注入ActivatedRoute获取路由信息 constructor(private route: ActivatedRoute) {} ngOnInit(): void { // 方式1：获取初始参数（适用于参数不变化的场景） this.currentId = this.route.snapshot.paramMap.get('id'); // 方式2：订阅参数变化（适用于同一组件内参数更新的场景，如详情页切换ID） this.route.paramMap.subscribe(params => { this.currentId = params.get('id'); // 根据ID请求数据，渲染详情内容 // this.loadDetailData(this.currentId); }); } }

4. 核心要点

• 动态路由的path中通过:参数名定义可变部分，参数名可自定义；
• 获取参数有两种方式：snapshot（快照，一次性获取）和subscribe（订阅，监听参数变化）；
• 编程式跳转使用router.navigate()，参数需放在数组中（如['/detail', id]）。

四、通配符路由：处理 404 页面

通配符路由（**）用于匹配所有未定义的路由，通常用于处理 404 页面，需放在路由数组的最后（Angular 路由按顺序匹配）。

1. 配置示例

const routes: Routes = [ // 静态路由 { path: 'home', component: HomeComponent }, { path: 'about', component: AboutComponent }, // 动态路由 { path: 'detail/:id', component: DetailComponent }, // 默认重定向 { path: '', redirectTo: '/home', pathMatch: 'full' }, // 通配符路由：匹配所有未定义的路径，放在最后！ { path: '**', component: NotFoundComponent } ];

2. 404 页面模板示例（not-found.component.html）

<div class="not-found"> <h1>404 - 页面未找到</h1> <p>你访问的路径不存在，请返回首页</p> <a routerLink="/home">返回首页</a> </div>

3. 核心要点

• 通配符路由的path为**，必须放在路由数组的最后，否则会覆盖前面的路由；
• 主要用于处理无效路径，提升用户体验；
• 若需重定向到 404 页面，也可配置：{ path: '**', redirectTo: '/not-found' }（需提前配置/not-found路由）。

五、完整路由配置示例

// app-routing.module.ts 完整代码 import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { HomeComponent } from './pages/home/home.component'; import { AboutComponent } from './pages/about/about.component'; import { DetailComponent } from './pages/detail/detail.component'; import { NotFoundComponent } from './pages/not-found/not-found.component'; const routes: Routes = [ // 静态路由 { path: 'home', component: HomeComponent }, { path: 'about', component: AboutComponent }, // 动态路由 { path: 'detail/:id', component: DetailComponent }, // 默认路由 { path: '', redirectTo: '/home', pathMatch: 'full' }, // 通配符路由（最后） { path: '**', component: NotFoundComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

六、路由配置核心注意事项

1. 路由匹配顺序：Angular 按路由数组的顺序匹配路径，通配符路由必须放在最后；
2. 路径匹配策略：pathMatch: 'full'表示完全匹配路径，空路径重定向时必须添加；
3. 参数获取场景：快照（snapshot）适用于参数不变化的场景，订阅（subscribe）适用于同一组件内参数更新的场景；
4. 路由懒加载：实际开发中，建议结合懒加载（loadChildren）优化性能，如：

   { path: 'detail/:id', loadChildren: () => import('./pages/detail/detail.module').then(m => m.DetailModule) }

总结

1. 静态路由：路径为固定字符串，适用于无参数的固定页面（如首页、关于页）；
2. 动态路由：通过:id定义参数化路径，适用于详情页等需动态传参的场景，可通过ActivatedRoute获取参数；
3. 通配符路由：**匹配所有未定义路径，用于 404 页面，需放在路由配置的最后。

掌握这三种路由配置方式，就能覆盖 Angular 项目中 90% 以上的路由场景。实际开发中，可结合路由守卫、懒加载等特性，进一步提升路由的安全性和项目性能。