Angular 的路由系统是构建单页应用（SPA）的核心能力之一，掌握高级路由技巧可以显著提升应用结构与用户体验。以下是关键知识点及实践建议：

1. 模块化路由 📁

  • 使用 RouterModule.forRoot() 配置根模块路由
  • 通过 RouterModule.forChild() 实现子模块路由
  • 示例： 
    const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent },
  { path: 'users', loadChildren: () => import('./users/users.module').then(m => m.UsersModule) }
];
  • 📌 图片：
    angular_routing_structure

2. 路由守卫 🛡️

  • CanActivate 控制路由访问权限
  • CanLoad 实现懒加载前的验证
  • Resolve 预加载数据
  • ⚠️ 注意：守卫需在 NgModule 中声明
  • 📌 图片：
    route_guard_flow

3. 嵌套路由 🧭

  • 通过 children 属性定义嵌套路径
  • 示例： 
    const routes: Routes = [
  {
    path: 'app',
    component: AppLayoutComponent,
    children: [
      { path: 'dashboard', component: DashboardComponent },
      { path: 'profile', component: ProfileComponent }
    ]
  }
];
  • 📌 图片：
    nested_routing_diagram

4. 路由参数与数据 📊

  • 使用 params 获取动态路由参数
  • 通过 data 传递静态元数据
  • 示例： 
    { path: 'user/:id', component: UserDetailComponent, data: { title: '用户详情' } }

5. 懒加载优化 📦

  • 使用 loadChildren 实现按需加载模块
  • 提升首屏加载速度，优化资源利用率
  • ⚠️ 注意：需配合 NgModule 的 entryComponents 配置

6. 路由配置最佳实践 ✅

  • ✅ 使用 pathMatch: 'full' 保证精确匹配
  • ✅ 配置 redirectTo 实现默认跳转
  • ✅ 启用 preloadingStrategy 控制预加载策略
  • ✅ 使用 RouterModule.forRoot() 时添加 { enableTracing: true } 调试路由
  • 📌 扩展阅读：Angular 路由深度解析

7. 常见问题排查 🔍

  • ❓ 路由无法加载？检查 RouterModule.forRoot() 是否在 AppModule 中
  • ❓ 嵌套路由失效？确认父路由的 component 是否正确
  • ❓ 参数未解析？使用 ActivatedRoute 的 snapshot 或 params 获取数据

📌 图片：

angular_routing_lifecycle

🧠 小贴士：使用 Router 的 events 监听路由变化，便于调试与日志记录
📚 推荐学习路径：Angular 路由进阶教程 → 路由与状态管理