前端开发中，路由是非常重要的一部分，它指导着我们的应用程序如何响应 URL 的变化。在 TypeScript 中使用路由可以让我们更加清晰、强类型化地组织我们的代码，并提高代码可读性、可维护性。
为什么要使用路由
在前端开发中，我们经常需要处理不同的 URL 请求。比如，我们的应用程序可能需要根据不同的 URL 地址显示不同的内容，或是从服务器请求不同的数据。这时，我们就需要引入路由来帮助我们处理这些 URL 请求。
路由在前端应用程序中扮演了一个重要的角色。它将 URL 与应用程序的组件、模版、数据模型等各种元素连接起来，帮助我们实现页面的导航和 URL 的切换。
使用路由库
在 TypeScript 中，我们可以使用多个路由库来实现路由功能。常见的路由库包括 Angular Router、React Router 等。在这里我们以 Angular Router 为例，介绍 TypeScript 中如何使用路由。
添加路由模块
首先，我们需要安装 Angular Router 路由模块。
npm install @angular/router --save
然后，在我们的应用程序中添加路由模块。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- -------------------
------ - -------------- - ---- --------------------
-----------
-------- -
--------------
----------------------
- ----- --- ---------- ------------- --
- ----- -------- ---------- -------------- --
--
--
------------- -
-------------
--------------
--------------
--
---------- - ------------ -
--
------ ----- --------- - -在上面的代码中，我们使用 RouterModule.forRoot() 方法来添加路由规则。这里我们定义了两个路由规则：空路由和 about 路由。空路由表示默认路由，访问首页时会自动跳转到 HomeComponent 组件；about 路由表示访问 /about 时会显示 AboutComponent 组件。
添加路由链接
现在，我们已经定义了两个路由。下一步是如何在应用程序中使用它们。
我们可以在应用程序中添加路由链接，将它们呈现在用户界面上。
<a routerLink="/">Home</a> <a routerLink="/about">About</a>
上面的代码中，我们使用了 Angular Router 提供的 routerLink 指令来创建路由链接。当用户点击这些链接时，路由器会自动导航到对应的路由地址。
获取路由参数
最后，我们来看一下如何获取路由参数。
在实际开发中，我们经常需要从 URL 中获取参数，比如 /user/:id 这样的路由路径。在 Angular 中，我们可以通过 ActivatedRoute 服务来获取路由参数。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- ------------------
------------
--------- -
------- -- --------
-
--
------ ----- ------------- -
--- -------
------------------- ------ --------------- -
---------------------------------- -- -
------- - -------------
---
-
-在上面的代码中，我们可以通过 ActivatedRoute 的 params 属性来获取路由参数。params 是一个参数集合，以 key-value 的形式存储了所有路由参数。我们可以通过 params['id'] 来获取指定的参数值。
总结
在 TypeScript 中使用路由可以帮助我们更加清晰地组织代码，提高代码可读性和可维护性。在实际开发中，我们可以通过路由链接和 ActivatedRoute 服务来处理 URL 请求和路由参数。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64536c95968c7c53b07d1f61