Community/Angular/Examples/Routing

Angular 路由示例指南 🌐

1. 基础路由配置

使用 RouterModule 配置路由是 Angular 应用的核心步骤：

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 { }

2. 动态路由参数

通过 :param 语法捕获动态数据：

{ path: 'users/:id', component: UserDetailComponent }

3. 嵌套路由

在模块中定义子路由：

const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    children: [
      { path: 'overview', component: OverviewComponent },
      { path: 'settings', component: SettingsComponent }
    ]
  }
];

了解更多 Angular 组件开发示例 →