Angular 是一个强大的前端框架，提供了丰富的功能来构建单页应用（SPA）。其中，路由模块（RouterModule）是 Angular 中非常重要的一个模块，它允许我们在应用中实现页面之间的导航，而无需重新加载整个页面。本文将详细介绍如何在 Angular 中使用路由模块。
在 Angular 中，路由模块用于管理应用中的导航。它通过 URL 的变化来加载不同的组件，从而实现页面的切换。路由模块的核心是 RouterModule，它提供了路由配置、导航、参数传递等功能。
在 Angular 中，通常我们会为每个模块创建一个独立的路由模块。假设我们有一个名为 AppModule 的主模块，我们可以通过以下步骤来创建并配置路由模块。
首先，使用 Angular CLI 生成一个路由模块：
ng generate module app-routing --flat --module=app --flat：将文件放在 src/app 目录下，而不是单独的子目录中。--module=app：将路由模块注册到 AppModule 中。在生成的路由模块文件 app-routing.module.ts 中，我们可以配置路由。以下是一个简单的路由配置示例：
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: '', component: HomeComponent }, { path: 'about', component: AboutComponent }, { path: '**', redirectTo: '' } // 默认路由 ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } 在这个配置中：
path: ''：表示根路径，加载 HomeComponent。path: 'about'：表示 /about 路径，加载 AboutComponent。path: '**'：表示匹配任何未定义的路由，并重定向到根路径。确保在 AppModule 中导入了 AppRoutingModule：
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { HomeComponent } from './home/home.component'; import { AboutComponent } from './about/about.component'; @NgModule({ declarations: [ AppComponent, HomeComponent, AboutComponent ], imports: [ BrowserModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 配置好路由后，我们可以在模板中使用 <router-outlet> 指令来显示路由对应的组件。例如，在 app.component.html 中：
<nav> <a routerLink="/">Home</a> <a routerLink="/about">About</a> </nav> <router-outlet></router-outlet> routerLink：用于导航到指定的路由。<router-outlet>：用于显示当前路由对应的组件。在实际应用中，我们经常需要传递参数给路由。Angular 提供了多种方式来传递参数。
路径参数是通过 URL 传递的。例如，我们可以定义一个带有参数的路由：
const routes: Routes = [ { path: 'user/:id', component: UserComponent } ]; 在 UserComponent 中，我们可以通过 ActivatedRoute 来获取参数：
import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'app-user', templateUrl: './user.component.html', styleUrls: ['./user.component.css'] }) export class UserComponent implements OnInit { userId: string; constructor(private route: ActivatedRoute) { } ngOnInit(): void { this.userId = this.route.snapshot.paramMap.get('id'); } } 查询参数是通过 URL 的查询字符串传递的。例如：
<a [routerLink]="['/user']" [queryParams]="{id: 123}">User 123</a> 在组件中，我们可以通过 ActivatedRoute 来获取查询参数：
ngOnInit(): void { this.route.queryParams.subscribe(params => { this.userId = params['id']; }); } 路由守卫（Route Guards）用于控制用户是否可以访问某个路由。常见的守卫有 CanActivate、CanDeactivate、Resolve 等。
CanActivate 守卫用于控制用户是否可以进入某个路由。例如，我们可以创建一个 AuthGuard：
import { Injectable } from '@angular/core'; import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router'; import { Observable } from 'rxjs'; import { AuthService } from './auth.service'; @Injectable({ providedIn: 'root' }) export class AuthGuard implements CanActivate { constructor(private authService: AuthService, private router: Router) {} canActivate( route: ActivatedRouteSnapshot, state: RouterStateSnapshot ): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree { if (this.authService.isLoggedIn()) { return true; } else { this.router.navigate(['/login']); return false; } } } 然后在路由配置中使用这个守卫：
const routes: Routes = [ { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] } ]; 为了提高应用的性能，我们可以使用懒加载（Lazy Loading）来延迟加载某些模块。例如：
const routes: Routes = [ { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) } ]; 这样，AdminModule 只有在用户访问 /admin 路径时才会被加载。
Angular 的路由模块提供了强大的功能来管理应用中的导航。通过合理配置路由，我们可以实现页面之间的无缝切换、参数传递、权限控制等功能。掌握路由模块的使用，对于构建复杂的单页应用至关重要。希望本文能帮助你更好地理解和使用 Angular 的路由模块。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
