在Angular框架中，路由是构建单页面应用（SPA, Single Page Applications）的关键组成部分，它允许用户在不刷新整个页面的情况下导航到不同的视图。Angular的路由系统是通过`@angular/router`库提供的，这个库使得应用程序可以根据URL来加载不同的组件，并处理页面之间的导航。
在Angular中，路由涉及到以下几个核心概念：
1. **路由配置**: 在应用程序中，路由是通过`RouterModule`和`Routes`接口定义的。在`app-routing.module.ts`文件中，我们会创建一个`routes`数组，其中包含各个路由的配置对象。每个配置对象至少需要`path`（路径）和`component`（组件）属性，例如：
```typescript
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent }
];
```
2. **模块导入**: 配置好路由后，需要在对应的模块中导入`RouterModule`和`Routes`，并使用`RouterModule.forRoot(routes)`来注册顶级路由，或者使用`RouterModule.forChild(routes)`注册子模块路由。
3. **导航链接**: Angular提供了`<router-outlet>`指令来呈现路由对应的组件，以及`<a>`标签的`routerLink`属性来进行导航。例如：
```html
<a routerLink="/home">Home</a>
<router-outlet></router-outlet>
```
4. **激活路由与路由参数**: 激活的路由可以通过`ActivatedRoute`服务访问，它提供了当前路由的信息，包括参数。例如，如果路由配置为`{ path: 'user/:id', component: UserComponent }`，则可以在`UserComponent`中获取`id`参数：
```typescript
import { ActivatedRoute } from '@angular/router';
constructor(private route: ActivatedRoute) {
this.route.params.subscribe(params => {
console.log('User ID:', params.id);
});
}
```
5. **路由守卫**: 路由守卫（ Guards ）是Angular路由系统的一部分，可以控制路由是否可以被激活或离开。常见的守卫有`CanActivate`、`CanDeactivate`、`Resolve`等，用于进行权限检查、数据预加载等操作。
6. **懒加载**: 对于大型应用，可以使用懒加载（Lazy Loading）来提高性能，只有当用户首次访问某个路由时才加载其模块和相关代码。这可以通过在路由配置中使用`loadChildren`属性实现。
7. **路由重定向**: 可以设置路由重定向，当用户访问一个特定路径时，自动跳转到另一个路径。例如：
```typescript
{ path: '', redirectTo: '/home', pathMatch: 'full' }
```
8. **路由命名**: 虽然路径是路由的主要标识符，但还可以为路由指定一个名称，以便在代码中引用，如`{ path: 'about', component: AboutComponent, name: 'about' }`。然后，可以使用`router.navigate(['/about'])`或`router.navigateByUrl('about')`来导航。
9. **路由嵌套**: Angular支持路由的嵌套，即一个路由下可以包含多个子路由，形成路由树结构。这使得构建复杂的导航结构变得容易。
10. **路由状态管理**: Angular Router还提供了一些服务，如`RouterState`和`StateSnapshot`，用于获取当前路由的状态，这对于跟踪用户导航历史和实现导航撤销功能非常有用。
以上是Angular路由的基本概念和使用方法。通过熟练掌握这些知识点，开发者能够构建出具有高效导航功能的Angular应用程序。在实际项目中，还需要根据需求灵活运用路由守卫、懒加载等功能，以优化用户体验和提高应用性能。
第3章 Angular-路由.zip （9个子文件） 
第3章 Angular-路由 
3-4 重定向路由.mp4 27.73MB
