前言
Angular 是一个流行的前端框架，在构建单页面应用程序时，路由功能是必不可少的。Angular 路由是 Angular 中的一个重要模块，它提供了一个强大的机制来控制单页面应用程序的导航。本文将详细介绍 Angular 路由的使用及注意事项，并提供示例代码，帮助读者更好地掌握 Angular 路由的使用方法。
Angular 路由的使用
安装 Angular 路由
在使用 Angular 路由之前，需要安装 Angular 路由模块。我们可以通过 npm 命令行安装：
npm install @angular/router
导入模块
安装完路由模块后，我们需要在 app.module.ts 文件中导入 RouterModule 模块：
import { RouterModule } from '@angular/router';然后，将 RouterModule 模块添加到 imports 数组中：
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})配置路由
当安装和导入了 Angular 路由模块后，我们需要配置路由。路由配置需要写在 app.module.ts 文件中，我们定义一个名为 routes 的常量来存储路由配置信息。路由配置信息包含路由的路径及相关组件。
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'contact', component: ContactComponent },
{ path: '**', component: PageNotFoundComponent }
];上述路由配置信息定义了三个路径以及它们分别对应的组件。第一个路径是空路径，它对应 HomeComponent 组件；第二个路径是 /about，它对应 AboutComponent 组件；第三个路径是 /contact，它对应 ContactComponent 组件。第四个路径是 **，它表示匹配所有未定义的路径，并对应 PageNotFoundComponent 组件。
在 HTML 中使用路由
在 HTML 中使用路由，我们可以使用 routerLink 指令。该指令会自动生成 href 属性。例如：
<a routerLink="/">Home</a> <a routerLink="/about">About</a> <a routerLink="/contact">Contact</a>
在 ts 文件中使用路由
在 ts 文件中使用路由，我们可以使用 ActivatedRoute 和 Router 服务。ActivatedRoute 服务提供了关于当前活动的路由信息。Router 服务可以用于导航到其他路由。
例如，在 AboutComponent 中，我们可以注入 ActivatedRoute 服务：
import { ActivatedRoute } from '@angular/router';
constructor(private route: ActivatedRoute) {}在 ContactComponent 中，我们可以注入 Router 服务：
import { Router } from '@angular/router';
constructor(private router: Router) {}路由参数
Angular 路由支持传递参数。参数可以通过路由路径传递。
例如，在定义路由时，我们可以将参数添加到路径中：
const routes: Routes = [
{ path: 'products/:id', component: ProductDetailComponent },
];在组件中，我们可以使用 ActivatedRoute 服务获取参数：
-- -------------------- ---- -------
------ - -------------- - ---- ------------------
------------------- ------ --------------- --
---------- -
---------------------------------- -- -
--------------------------
---
-路由守卫
路由守卫是一个重要的概念。它允许我们在路由导航过程中拦截并执行一些操作。例如，可以使用路由守卫来验证用户是否有权访问路由。
Angular 路由提供了三种路由守卫：
- CanActivate：路由导航前执行，用来判断是否允许导航。
- CanDeactivate：路由导航后执行，在组件销毁之前执行，用来确认是否允许离开该页面。
- Resolve：在路由导航前执行，用来预先处理异步数据。
例如，我们可以使用 CanActivate 守卫来处理用户权限：
-- -------------------- ---- -------
------ - ------------ -------------------- ---------------------- - ---- ------------------
-------------
----------- -------
--
------ ----- --------- ---------- ----------- -
------------------- ------------ ------------ ------- ------- ------- --
------------
----- -----------------------
------ --------------------- ------------------- - ---------------- - ------- -
-- ------------------------------- -
------ -----
- ---- -
---------------------------------
------ ------
-
-
-嵌套路由
嵌套路由是指在一个组件中嵌套其他组件的路由。例如，在管理页面中，我们可以通过嵌套路由来实现左侧菜单栏和右侧详情页面的显示。
例如，我们可以定义一个路由：
-- -------------------- ---- -------
----- ------- ------ - -
-
----- --------
---------- ---------------
--------- -
- ----- ------------ ---------- ------------------ --
- ----- -------- ---------- -------------- --
- ----- ----------- ---------- ----------------- --
--
--
--上述路由定义了一个 admin 路径，对应 AdminComponent 组件。在 AdminComponent 组件中，我们使用 RouterOutlet 指令来渲染它的子路由。
-- -------------------- ---- -------
---- ------------------
----
------ -----------------------------------------
------ ---------------------------------
------ ---------------------------------------
-----
------
---- ----------------
-------------------------------
------注意事项
- 避免在路由配置文件中使用未定义的路径。例如，应该使用 ** 路径定义 PageNotFoundComponent 组件。
- 避免在 loadChildren 属性中使用相对路径。建议使用绝对路径。
- 避免使用 canActivate 守卫中的同步操作。建议将守卫中的操作改为异步操作。
- 为避免路由冲突，可以在常规路由和通配符路由之间增加空路径路由。
- 避免在路由导航期间频繁调用 HTTP 请求。
结论
Angular 路由是 Angular 中的一个重要模块。通过本文，我们详细介绍了 Angular 路由的使用方法，并提供了示例代码。在开发过程中，我们需要注意一些问题，以避免不必要的错误并提高应用程序的性能。希望本文能够帮助读者更好地掌握 Angular 路由的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f5f23ac5c563ced57dd4a9