Angular 组件路由教程 🌐

Angular 的组件路由是实现单页应用（SPA）的核心功能之一，通过路由可以动态加载组件，提升用户体验和应用性能。以下是关键知识点：

1. 基本概念 📌

• 路由模块：使用 RouterModule.forRoot() 配置主路由
• 路由配置：定义路径与组件的映射关系
• 嵌套路由：通过 children 属性实现子路由结构
• 路由守卫：控制路由访问权限（如 CanActivate）

2. 实现步骤 ✅

1. 创建路由模块文件（如 app-routing.module.ts）
2. 定义路由数组

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

3. 导入 RouterModule 并挂载到主模块

   import { RouterModule } from '@angular/router';
   @NgModule({
     imports: [RouterModule.forRoot(routes)],
     exports: [RouterModule]
   })  
   

4. 在模板中使用 <router-outlet> 标记路由出口

3. 示例代码 📁

• 查看完整示例项目（含动态路由和参数传递）
• 嵌套路由示例：

  const routes: Routes = [
    { 
      path: 'users', 
      component: UsersComponent,
      children: [
        { path: 'details/:id', component: UserDetailComponent }
      ]
    }
  ];  
  

4. 注意事项 ⚠️

• 确保路由模块正确导入到主模块中
• 使用 RouterModule.forChild() 配置子路由模块
• 路由参数需通过 ActivatedRoute 获取
• 避免在路由路径中使用特殊字符

5. 扩展阅读 📚

• Angular 官方路由文档
• 路由守卫进阶用法
• 动态加载组件技巧

如需进一步了解，请点击上方链接深入学习！