13 路由与导航之路由的基本概念

在上一篇中，我们探讨了双向数据绑定的概念以及如何在Angular中实现数据的双向流动。这为我们构建更动态的应用奠定了基础。如今，我们将开启另一项关键的主题——路由与导航。在现代Web应用中，路由不仅仅是应用的导航机制，更是将用户体验与应用逻辑串联的纽带。

什么是路由？

在Angular中，路由是用户与应用的交互过渡的桥梁。它允许我们在不同的组件之间导航，并决定呈现哪个组件。在单页面应用（SPA）中，路由的作用尤其重要，因为它使得用户无需重新加载页面便能浏览不同的内容。

主要概念

1. 路由器（Router）：Angular中的Router是负责处理应用中的路由和导航的模块。它负责了解哪个组件应该呈现，并在用户请求时执行相应的操作。

2. 路由配置（Route Configuration）：定义了不同的路径和相应组件之间的映射。通过配置，你可以指定访问某个URL时所要显示的组件。

3. 路由器链接（RouterLink）：这是用于创建导航链接的Angular指令。它直接与Router的功能相结合，能够在组件间快速导航。

4. 路由激活（Route Activation）：每次用户导航到某个路由时，Router会根据预设逻辑激活相应的组件。

Route Configuration

首先，让我们来看一个简单的路由配置的例子：

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 }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

在上面的代码中，我们定义了两个路由：

• 当用户访问根路径（/）时，HomeComponent将被渲染。
• 当用户访问/about路径时，AboutComponent将被渲染。

RouterLink 指令

在模板中，我们可以使用RouterLink指令来创建导航链接：

<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/about">About</a>
</nav>
<router-outlet></router-outlet>

在这个例子中，<a>标签指向不同的路由，而<router-outlet>是一个占位符，用于动态加载匹配的组件。

激活的路由

当你点击链接，Angular的Router会自动激活相应的路由，并显示组件。以HomeComponent为例，当路径为/时，应用会显示这个组件，而在点击About链接后，它会自动渲染对应的AboutComponent。

小结

路由与导航是构建现代Angular应用的重要部分。有效的路由配置不仅提高了用户体验，也使得应用的结构更为清晰。在本章中，我们了解了路由的基本概念，配置路由的方法，以及如何利用RouterLink实现组件间的导航。

在接下来的章节中，我们将深入探讨路由配置，包括参数化路由、路由守卫等更复杂的内容。这些内容将帮助我们管理更复杂的用户访问场景，并增强应用的安全性和灵活性。

为了更好的掌握Angular的路由特性，亲自动手实践是非常重要的。建议你在自己的项目中实施这些基础知识，同时思考如何在不同的上下文中使用路由功能。

接下来，我们将进入第五章——配置路由，探索更深入的路由技术及其实践应用！