Angular 路由详解 🌐

Angular 路由是实现单页应用（SPA）多视图跳转的核心机制，通过 RouterModule 和 Router 模块管理页面导航。以下是关键知识点：

1. 路由基础概念 📌

• RouterModule：通过 forRoot() 方法配置全局路由
• Router：用于程序化导航的实例（如 this.router.navigate([...])）
• Route：定义路由路径与组件的映射关系
• 📌 图片：

2. 路由模块配置 📁

在 app.module.ts 中引入路由模块：

import { RouterModule } from '@angular/router';
import { routes } from './app.routes';

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

3. 路由组件示例 🧱

const routes: Route[] = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent },
  { path: '**', redirectTo: 'home' } // 默认路由
];

4. 路由懒加载 ✅

通过 loadChildren 实现按需加载：

{ path: 'lazy', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) }

5. 导航策略 🚀

• 浏览器导航：BrowserModule 提供基础路由功能
• HashLocationStrategy：使用 # 符号（适用于不支持 HTML5 History API 的场景）
• PathLocationStrategy：基于 URL 路径的现代导航方式

📌 图片：

6. 扩展阅读 📚

• Angular 路由器指南：深入理解路由机制
• 路由模块详解：模块化路由实践
• 导航策略对比：选择最适合的导航方式

📌 图片：