1. 配置基本路由：
在 Angular 应用中配置基本路由，以便在不同视图之间进行导航。
// app-routing.module.ts
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
];
2. 在模板中使用路由链接：
使用 routerLink 指令在模板中创建路由链接，以实现用户点击时的导航。
<!-- app.component.html -->
<nav>
<a routerLink="/home">Home</a>
<a routerLink="/about">About</a>
</nav>
3. 传递路由参数：
通过路由参数传递数据，以便在目标组件中使用。
// app-routing.module.ts
const routes: Routes = [
{ path: 'user/:id', component: UserProfileComponent },
];
// user-profile.component.ts
constructor(private route: ActivatedRoute) {
this.route.params.subscribe(params => {
this.userId = params['id'];
});
}
4. 使用路由守卫（路由守卫）：
利用路由守卫在导航发生前后执行逻辑，例如验证用户权限。
// auth.guard.ts
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): boolean {
// Your authentication logic here
}
5. 配置子路由：
创建和配置子路由，以实现更复杂的导航结构。
// app-routing.module.ts
const routes: Routes = [
{
path: 'products',
component: ProductsComponent,
children: [
{ path: 'list', component: ProductListComponent },
{ path: 'detail/:id', component: ProductDetailComponent },
],
},
];
6. 惰性加载（懒加载）：
使用惰性加载，将模块延迟加载到用户访问相关路由时才加载，提高应用性能。
// app-routing.module.ts
const routes: Routes = [
{ path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) },
];
7. 处理路由事件：
监听路由事件，例如导航开始、导航结束等，以执行额外的逻辑。
// app.component.ts
constructor(private router: Router) {
router.events.subscribe(event => {
if (event instanceof NavigationStart) {
// Navigation started
}
});
}
8. 重定向路由：
配置重定向路由，将用户重定向到应用中的不同部分。
// app-routing.module.ts
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
// other routes...
];
这些任务覆盖了在 Angular 应用中使用路由时的许多常见情景。深入理解这些概念和模式，可以使你更高效地利用 Angular 路由系统来构建功能强大的单页应用。
转载请注明出处：http://www.pingtaimeng.com/article/detail/4937/Angular