Angular 路由示例指南

Angular 路由是构建单页面应用程序（SPA）的关键部分。以下是一个简单的路由示例，展示了如何使用 Angular 路由来管理应用程序的导航。

基本概念

在 Angular 中，路由是通过 RouterModule 来定义的。以下是一些基本概念：

  • 路由配置：定义了应用程序的路由规则。
  • 路由器：根据 URL 路径来决定显示哪个组件。
  • 组件：Angular 应用程序中的可复用的 UI 部分。

示例

假设我们有一个简单的应用程序，它包含以下路由：

  • 主页：/
  • 关于页面：/about
  • 产品页面：/products

首先，我们需要在 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';
import { ProductsComponent } from './products/products.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'products', component: ProductsComponent }
];

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

接下来，我们可以在 app.component.html 中添加导航链接：

<nav>
  <a routerLink="/">主页</a>
  <a routerLink="/about">关于</a>
  <a routerLink="/products">产品</a>
</nav>
<router-outlet></router-outlet>

现在，当用户访问 /about 时，AboutComponent 将被显示。

扩展阅读

想要了解更多关于 Angular 路由的信息，请访问我们的Angular 路由教程。

Angular Routing