1. 配置路由：
在 Angular 中，路由配置定义了路径和对应组件之间的映射关系。通常，路由配置位于应用的根模块或独立的路由模块中。示例：
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
2. 在模板中使用路由链接：
使用 Angular 提供的 routerLink 指令在模板中创建路由链接，以便用户点击时触发导航。
<!-- app.component.html -->
<nav>
<a routerLink="/">Home</a>
<a routerLink="/about">About</a>
</nav>
<router-outlet></router-outlet>
3. 路由参数：
通过路由参数，你可以传递数据给路由。在路由配置中定义参数，并在组件中通过 ActivatedRoute 服务来访问这些参数。
// app-routing.module.ts
const routes: Routes = [
{ path: 'user/:id', component: UserProfileComponent },
];
// user-profile.component.ts
import { ActivatedRoute } from '@angular/router';
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 },
],
},
];
<!-- products.component.html -->
<router-outlet></router-outlet>
6. 惰性加载（懒加载）：
通过惰性加载，你可以将模块延迟加载到用户访问相关路由时才加载，以减少初始加载时间。
// app-routing.module.ts
const routes: Routes = [
{ path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) },
];
7. 路由事件：
Angular 提供了一些路由事件，允许你监听导航的不同生命周期事件，如导航开始、导航结束等。
// app.component.ts
constructor(private router: Router) {
router.events.subscribe(event => {
if (event instanceof NavigationStart) {
// Navigation started
}
});
}
以上是一些关于 Angular 路由与导航的基本概念和用法。深入了解这些概念，可以帮助你更好地构建可维护和可扩展的单页应用。
转载请注明出处：http://www.zyzy.cn/article/detail/4936/Angular