14 路由与导航之配置路由

在上一章节中，我们探讨了路由的基本概念，包括路由的定义、目的以及如何在 Angular 中实现基本的路由。现在，我们将深入探讨在 Angular 应用中如何配置路由，以使我们的应用获得更好的页面导航和用户体验。

路由配置的基本结构

要在 Angular 中配置路由，我们需要在应用模块中定义一个路由配置。这个配置是一个数组，数组中的每个对象都代表一个路由的设置。基本的路由配置通常包含以下几个属性：

• path: 定义路由的路径。
• component: 该路径对应的组件。
• redirectTo: 重定向目标路径（可选）。
• pathMatch: 路径匹配策略（可选）。

以下是一个简单的路由配置示例：

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: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

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

在这个例子中，我们配置了三个路由：

1. 如果用户访问根路径（''），则重定向到 /home。
2. 访问 /home 时，加载 HomeComponent。
3. 访问 /about 时，加载 AboutComponent。

使用 redirectTo 和 pathMatch

redirectTo

redirectTo 属性用于在特定路径上进行重定向。在我们的配置中：

{ path: '', redirectTo: '/home', pathMatch: 'full' }

当用户访问网站的根路径时，应用会自动重定向到 /home。

pathMatch

pathMatch 属性定义了路径匹配策略。它有两个可能的值：

• full: 只有在完整路径匹配时才会发生重定向（如上例所示）。
• prefix: 只要路径的前缀匹配即可发生重定向。

例如，如果路径为 prefix，则 /home 和 /home/about 都将受到 /home 的影响。

加载子路由

为了构建更加复杂的导航结构，可以使用子路由。子路由允许我们在某个路由组件中嵌套另一个路由配置。例如，在 AboutComponent 中可能还有一些更多的子路由，如 team 和 history：

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent, children: [
      { path: 'team', component: TeamComponent },
      { path: 'history', component: HistoryComponent }
    ]
  }
];

在 AboutComponent 模板中，我们可以使用 <router-outlet></router-outlet> 将子路由显示在适当的位置：

<h2>About Us</h2>
<nav>
  <a routerLink="team">Our Team</a>
  <a routerLink="history">History</a>
</nav>
<router-outlet></router-outlet>

想了解更多

在本节中，我们已经涵盖了 Angular 应用中的基础路由配置，包括如何设置简单的路由、使用重定向以及配置子路由。路由系统是 Angular 应用的核心组成部分，对于构建动态和复杂的用户界面至关重要。

在下一节中，我们将进一步讨论路由参数及其如何帮助我们处理动态数据和路由。通过使用路由参数，我们可以让应用能够根据用户的输入动态加载不同的内容。敬请期待！