导言
Angular 是一款由 Google 推出的 JavaScript 框架，是目前前端开发中广受欢迎的技术之一。其中，路由是 Angular 中的一个重要组成部分，它可以帮助我们实现 SPA（Single Page Application）应用的页面切换，提升了用户体验。本篇文章将详细介绍 Angular 路由的使用方法，并会探讨一些常见的问题及解决方法。
Angular 路由的基本用法
- 安装路由模块
要使用 Angular 的路由，我们需要先安装 @angular/router 模块。可以使用 npm 安装：
npm install @angular/router --save
- 配置路由
Angular 的路由配置分为两个部分：路由定义和路由表。我们可以在项目根目录下创建一个名为 app-routing.module.ts 的 TypeScript 文件，用来定义路由表，示例代码如下：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------- ------------ - ---- ------------------ ------ - ------------- - ---- ------------------- ------ - -------------- - ---- -------------------- ----- ------- ------ - - - ----- --- ---------- ------------- -- - ----- -------- ---------- -------------- - -- ----------- -------- ------------------------------- -------- -------------- -- ------ ----- ---------------- - -
上述代码中，我们首先导入了 Routes 和 RouterModule 模块。Routes 模块用来定义路由表，RouterModule 模块则提供了多种用于路由导航的指令和服务等功能。我们接着定义了两个路由：'/' 代表了根路由，即应用的默认路由；'/about' 则代表了关于页面的路由。这里，HomeComponent 和 AboutComponent 分别是两个组件，它们在后面的代码中会被定义和导入。
在定义完路由表后，我们需要在模块中导入并注册路由表。到这里，我们打开 app.module.ts 文件，并在其中导入我们刚刚定义的 AppRoutingModule，示例代码如下：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ---------------- - ---- -----------------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- -------------------
------ - -------------- - ---- --------------------
-----------
------------- -
-------------
--------------
--------------
--
-------- -
--------------
----------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -在导入后，我们将 AppRoutingModule 注入到模块的 imports 数组中即可。
- 配置模板和组件
在定义完路由表后，我们需要在模板和组件中使用路由。在模板中，我们可以使用 Angular 提供的路由指令和链接组件来导航到不同的页面。示例代码如下：
<h1>My App</h1> <nav> <a routerLink="/">Home</a> <a routerLink="/about">About</a> </nav> <router-outlet></router-outlet>
上述代码中，我们使用了 routerLink 指令来为页面中的链接绑定路由。<router-outlet> 标签则会在其中显示不同的组件，根据路由匹配情况自动切换。
在组件中，我们可以使用路由服务来获取当前路由信息并进行相应的操作。示例代码如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- ------------------
------------
--------- ------------
--------- ---------- ----------
--
------ ----- -------------- -
------------------- ------ --------------- -
--------------------------------------- -- -
-------------------- -- -- --- --
---
-
-上述代码中，我们定义了一个 AboutComponent 组件，并导入了路由服务 ActivatedRoute。在组件的构造函数中，我们通过 this.route.queryParams 对象来获取当前 URL 中的参数，并输出到控制台。
- 启动应用
在完成以上代码的编写后，我们就可以启动应用了。使用以下命令启动开发服务器：
ng serve -o
命令会默认在 localhost:4200 地址下打开我们的应用，此时我们就可以使用我们定义的路由来访问不同的页面了。
Angular 路由常见问题及解决方法
- 页面刷新后 404
当我们定义了静态路由，并在浏览器中输入路径进行访问时，如果页面发生了刷新，则会出现 404 错误，因为此时浏览器会向服务器请求资源，而服务器会认为该路径下不存在相应的文件。解决方法是在服务器上做一些配置，比如使用 NGINX 等服务器来配置 index.html 页面的路由规则，从而避免了 404 错误。
- 路由重定向
当我们需要将某些页面的路由重定向或直接跳转到其他页面时，可以使用 Angular 提供的 redirectTo 和 pathMatch 等参数来配置，并将其添加到路由定义中。示例代码如下：
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent }
];上述代码中，我们将根路由重定向到 /home 路径，并且设置了 pathMatch 为 full，这样一个完整的路径才能被匹配到。
- 路由守卫
路由守卫可以帮助我们控制某些页面的访问权限，比如当用户未登录时禁止访问某些页面等。Angular 提供了多种路由守卫，包括 CanActivate，CanDeactivate，Resolve 和 CanLoad 等。示例代码如下：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------------ ----------------------- -------------------- ------- - ---- ------------------
------ - ---------- - ---- -------
-------------
----------- ------
--
------ ----- --------- ---------- ----------- -
------------
----- -----------------------
------ -------------------
-- ------------------ - -------- - --------------- - -------- - ------- - ------- -
----- -------- - -- --------
-- ----------- -
------ ------
-
------ -----
-
-上述代码中，我们定义了一个 AuthGuard 类，并实现了 CanActivate 接口。在 canActivate 方法中，我们可以进行某些业务逻辑的判断，决定是否禁止用户访问该页面。
- 动态路由
动态路由可以帮助我们在运行时动态创建路由，它们可以接受 URL 参数，根据参数的不同来创建不同的组件。示例代码如下：
const routes: Routes = [
{ path: 'post/:id', component: PostComponent }
];上述代码中，我们定义了一个动态路由，可以接受 id 参数。在组件中，我们可以使用 ActivatedRoute 服务来获取路由参数：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- ------------------
------------
--------- -----------
--------- --------- ------------
--
------ ----- ------------- -
------ --- -------
------------------- ------ --------------- -
---------------------------------- -- -
------- - --------------
---
-
-上述代码中，我们在构造函数中使用 this.route.params 对象来获取路由参数，并将其赋值给组件中的 id 属性。
总结
Angular 路由是实现 SPA 应用的有力工具，掌握它的基本用法及常见问题的解决方法可以帮助我们更加高效地编写复杂的应用。本篇文章详细介绍了路由的基本用法，并探讨了一些常见问题及相应的解决方法。建议读者在进行实际应用开发时，根据具体问题灵活使用 Angular 路由，并结合文中提供的示例代码进行学习和指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64707bea968c7c53b0e9c4c4