Angular 的路由功能（Routing）是实现单页应用（SPA）核心交互的关键技术，允许你根据 URL 动态加载组件，提升用户体验。

📌 1. 基础概念

  • Route：定义 URL 路径与组件的映射关系
  • Router Module：需在 AppModule 中导入 RouterModule
  • Navigation：通过 Router 实现页面跳转
  • Params：获取 URL 中的动态参数（如 /user/123 中的 123）

🧱 2. 快速入门步骤

  1. 安装依赖： 
    npm install @angular/router
  2. 创建路由模块： 
    import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';

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

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}
  3. 在主组件中使用 RouterOutlet 渲染路由 
    <router-outlet></router-outlet>

🌐 3. 进阶技巧

  • 嵌套路由：通过 children 属性实现子路由结构
  • 路由参数：使用 paramMap 获取动态路径参数
  • 路由守卫：通过 CanActivate 控制导航权限
  • 懒加载：使用 loadChildren 按需加载模块

📁 4. 本站相关资源

angular_routing_configuration

📝 提示：路由设计需遵循 Angular 官方最佳实践 以确保性能与可维护性。