Angular 是现代的 SPA（Single Page Application，单页应用）框架，而路由模块是 Angular 中十分重要且基础的一部分。一个高效且有良好用户体验的单页应用必须对页面的导航路由进行管理。本文将详细讲解 Angular 路由模块的配置方法，并提供示例代码。
前置知识
在学习 Angular 路由模块之前，你需要了解以下 Angular 的基础知识：
- Angular 模块和组件的基本概念
- TypeScript 编程语言
如果你还不掌握这些基础知识，请先学习官方文档，并做一些练习项目。
路由模块的基本构成
在 Angular 路由模块中，我们可以定义路由器和路由。路由模块包含以下几部分：
- RouterModule：定义了 Angular 的路由器模块。
- Routes：定义了本应用所需要的所有路由。
- RouterLink 和 RouterOutlet：这些指令用于页面导航。
在路由视角上，我们可以把它们简单的分成两类：路由器配置相关（RouterModule 和 Routes），以及路由导航相关（RouterLink 和 RouterOutlet）。
路由器配置
RouterModule
要使用 Angular 的路由器，我们首先需要导入 RouterModule 模块。RouterModule 为我们提供了一个 forRoot() 函数来定义我们应用的路由器模块。
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- ------ - ---- ------------------ ------ - ------------ - ---- ------------------ ------ - ------------- - ---- ------------------- ------ - ---------------- - ---- ---------------------- ----- ------- ------ - - - ----- --- ---------- ------------- -- - ----- ---------- ---------- ---------------- -- - ----- ----- ---------- ------------ - -- ----------- -------- ------------------------------- -------- -------------- -- ------ ----- ---------------- --
我们传递的 routes 参数包含本应用所需的所有路由。RouterModule.forRoot() 方法创建一个路由器模块并将其返回，该模块会由根模块 AppModule 导入。
Routes
定义路由需要用到 Routes 类。它是一个 JSON 数组，其中可以定义多个路由。
在 routes 数组中，每个路由都是一个对象，对象里包括至少两个属性：path 和 component。
- path：路由的路径，可以为相对或绝对路径。
- component：控制当前路由的 Angular 组件。
routes 数组也可以包含一些可选的属性：
- redirectTo：如果有了 redirectTo 属性，则会将路由重定向到指定路径。
- pathMatch：指定路径的匹配策略。可选值为 full 和 prefix，默认为 prefix。
- pathMatch：pathMatch 为 full 时，整个路径必须完全匹配。
- loadChildren：按需加载的路由定义必须有 loadChildren 属性。loadChildren 指定一个惰性加载的路由，返回一个加载该路由时所需的模块。这可以提高我们应用的性能。
路由导航
RouterLink
RouterLink 会动态生成 HTML 超链接，它接受一个字符串参数：目标 URL。如果这个 URL 与某个已定义的路径相匹配，Angular 就会激活相应的路由。
<nav> <a routerLink="/" routerLinkActive="active">Home</a> <a routerLink="/contact" routerLinkActive="active">Contact</a> </nav>
在这个示例中，我们使用了 routerLinkActive 属性，在当前路由被激活时会自动添加一个类，这样我们就可以在 CSS 中对其进行样式控制。
RouterOutlet
RouterOutlet 是一个占位符，用于在页面中呈现一个给定组件。
<router-outlet></router-outlet>
在模板中添加这个标签后，组件视图就会在路由器根据当前 URL 映射到的路由下生成并加载。
完整示例代码
下面是一个完整的路由模块配置示例。
app-routing.module.ts 文件：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- ------ - ---- ------------------ ------ - ------------ - ---- ------------------ ------ - ------------- - ---- ------------------- ------ - ---------------- - ---- ---------------------- ----- ------- ------ - - - ----- --- ---------- ------------- -- - ----- ---------- ---------- ---------------- -- - ----- ----- ---------- ------------ - -- ----------- -------- ------------------------------- -------- -------------- -- ------ ----- ---------------- --
home.component.ts 文件：
import { Component } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html'
})
export class HomeComponent {}home.component.html 文件：
<p>Welcome to the home page!</p>
contact.component.ts 文件：
import { Component } from '@angular/core';
@Component({
selector: 'app-contact',
templateUrl: './contact.component.html'
})
export class ContactComponent {}contact.component.html 文件：
<p>Welcome to the contact page!</p>
app.component.ts 文件：
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {}app.component.html 文件：
<nav> <a routerLink="/" routerLinkActive="active">Home</a> <a routerLink="/contact" routerLinkActive="active">Contact</a> </nav> <router-outlet></router-outlet>
总结
本文对 Angular 路由模块的配置进行了详细的讲解，并提供了完整的示例代码。路由模块是一项十分重要且基础的前端技术，对于 SPA 应用的优化和用户体验至关重要。掌握 Angular 路由模块的配置方法能够帮助开发者更好的构建高效、具有良好用户体验的单页应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6476af59968c7c53b0356dc6