17、Angular路由：从基础到高级应用

原创于 2025-08-22 09:57:21 发布 · 111 阅读

0 GEO检测

标签

#Angular路由 # 路由模块 # 路由参数

Angular开发实战精要专栏收录该内容

29 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

Angular路由：从基础到高级应用

在构建Angular应用时，路由是一个至关重要的部分，它能帮助我们实现页面的导航和数据的传递。本文将详细介绍Angular路由的各种功能和使用方法，包括路由模块的分离、路由参数的传递、组件的复用以及高级导航功能等。

1. 路由模块的分离与路由链接样式

首先，我们来看一个简单的页面未找到组件的示例：

export class PageNotFoundComponent {
  constructor(private router: Router) { }
  goHome() {
    this.router.navigate(['/']);
  }
}

在Angular中，链接参数数组也可以在 routerLink 指令中使用。例如，我们可以这样编写英雄路由的锚元素：

<a [routerLink]="['/heroes']">Heroes</a>

为了提升用户体验，我们可以使用CSS样式来指示当前激活的路由。 RouterModule 导出了 routerLinkActive 指令，我们可以用它来改变激活路由的样式。具体操作步骤如下：
1. 打开 app.component.css 文件，定义一个 active 类，设置背景颜色：