当前位置：首页 > news >正文

Angular路由深度解析

news 2026/3/27 2:26:34

# Angular路由：构建单页面应用的导航系统

一、路由是什么

想象一下你去图书馆找书。图书馆有明确的区域划分：小说区在二楼A区，科技类在三楼B区，历史类在一楼C区。当你需要某类书籍时，你会直接前往对应的区域，而不是把整个图书馆的书都搬到面前翻阅。

Angular路由就是这个“图书馆导航系统”。在单页面应用（SPA）中，路由负责管理不同“页面”之间的切换，但实际上这些“页面”都在同一个HTML文件中。路由通过改变URL来告诉应用：“现在用户想看的是哪个部分的内容”。

传统网站像是一本实体书，翻到新页面需要重新加载整个页面。而使用Angular路由的应用更像是一本电子书，切换章节时只有内容区域变化，其他部分（如菜单、页眉）保持不变。

二、路由能做什么

1. 页面导航

路由最基本的功能是在不同视图之间切换。比如从商品列表页跳转到商品详情页，从登录页跳转到主页。

2. 参数传递

就像在图书馆查询系统中输入书号找到具体书籍一样，路由可以传递参数。例如，/products/123中的“123”就是商品ID，路由会把这个ID传递给商品详情组件。

3. 权限控制

路由可以设置访问权限，就像公司不同区域需要不同的门禁卡。未登录用户访问管理页面时，路由可以将其重定向到登录页。

4. 懒加载

大型应用像是一个大型商场，路由可以做到“按需进入”。用户不访问的区域（如管理后台）不会一开始就加载，只有当用户需要时才会加载，这显著提升了应用初始加载速度。

5. 浏览器历史记录

路由管理浏览器的前进和后退功能，让单页面应用拥有与传统网站一样的导航体验。

三、怎么使用

基本配置

首先需要在应用中设置路由模块：

// app-routing.module.tsimport{NgModule}from'@angular/core';import{RouterModule,Routes}from'@angular/router';import{HomeComponent}from'./home/home.component';import{ProductListComponent}from'./products/product-list.component';import{ProductDetailComponent}from'./products/product-detail.component';constroutes:Routes=[{path:'',component:HomeComponent},// 默认路径显示首页{path:'products',component:ProductListComponent},{path:'products/:id',component:ProductDetailComponent},// 带参数的路由{path:'**',redirectTo:''}// 未匹配路径重定向到首页];@NgModule({imports:[RouterModule.forRoot(routes)],exports:[RouterModule]})exportclassAppRoutingModule{}

路由出口

在主要模板中设置路由内容的显示位置：

<!-- app.component.html --><header>网站标题</header><nav>导航菜单</nav><!-- 路由内容将在这里显示，像电视换台一样 --><router-outlet></router-outlet><footer>网站页脚</footer>

导航方式

有两种主要导航方式：

模板中导航（类似HTML链接）：

<arouterLink="/products">商品列表</a><a[routerLink]="['/products', productId]">商品详情</a>

代码中导航：

// 在组件类中constructor(privaterouter:Router){}goToProduct(id:number){this.router.navigate(['/products',id]);}

获取路由参数

在组件中获取路由传递的参数：

import{ActivatedRoute}from'@angular/router';constructor(privateroute:ActivatedRoute){this.route.params.subscribe(params=>{constproductId=params['id'];// 使用productId加载对应商品数据});}

懒加载配置

对于大型应用，使用懒加载提升性能：

constroutes:Routes=[{path:'admin',loadChildren:()=>import('./admin/admin.module').then(m=>m.AdminModule)// 只有当访问/admin时才加载这个模块}];

四、最佳实践

1. 模块化组织

将相关功能的路由组织在一起，就像把超市商品按类别摆放。商品相关路由放在商品模块中，用户相关路由放在用户模块中。

2. 使用路由守卫

路由守卫像安检系统，控制谁能进入哪些区域：

// 认证守卫@Injectable()exportclassAuthGuardimplementsCanActivate{canActivate():boolean{if(用户已登录){returntrue;}else{this.router.navigate(['/login']);returnfalse;}}}// 在路由配置中使用{path:'dashboard',component:DashboardComponent,canActivate:[AuthGuard]}