在现代 Web 开发中，前端路由是一个不可或缺的部分。它能够帮助我们实现单页应用（Single Page Application，SPA），通过在用户在应用中进行操作时，只刷新页面的一部分，从而提高用户体验，并减少到服务器的请求数量。在 Angular2+ 中，前端路由被视为核心模块之一，它提供了很多有用的功能和配置选项。
Angular2+ 前端路由的基本使用
首先需要导入 RouterModule 模块，并配置路由信息。以下是一个简单的路由配置示例：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- ------ - ---- ------------------ ------ - ------------- - ---- ------------------------ ------ - -------------- - ---- -------------------------- ----- ------- ------ - - - ----- --- ---------- ------- ---------- ------------- -- - ----- -------- ---------- -------------- -- -- ----------- -------- ------------------------------- -------- --------------- -- ------ ----- ---------------- --
以上代码通过 RouterModule.forRoot 方法将路由模块添加到应用中。Routes 数组包含定义路径、组件和其他参数的路由配置。比如，上述代码中有两个路由，HomeComponent 路径为空字符串时展示，AboutComponent 路径为 /about 时展示。
然后需要在应用中添加 RouterOutlet 组件，它在每次路由导航时，用于渲染响应组件的模板。在 AppComponent 中添加以下代码：
<router-outlet></router-outlet>
完成基础配置后，用户在应用中导航以匹配路由时，会自动加载相应组件并在 RouterOutlet 中呈现它。
Angular2+ 前端路由的高级用法
除了基本使用场景，Angular2+ 前端路由还允许进行更多高级配置。
1. 动态路由
动态路由允许你在应用程序运行时动态添加和移除路由。例如，下面的代码片段中，我们定义了 blog/:id 的路由。 :id 变量的值会在应用程序运行时动态设置。
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- ------ - ---- ------------------ ------ - ------------- - ---- ------------------------ ------ - ----------------- - ---- ---------------------------------- ----- ------- ------ - - - ----- --- ---------- ------- ---------- ------------- -- - ----- ----------- ---------- ----------------- -- -- ----------- -------- ------------------------------- -------- --------------- -- ------ ----- ---------------- --
在组件中读取属性值，可以使用 ActivatedRoute 服务，它在路由发生变化时，可以获取当前路由的参数信息。通过以下代码可以访问 id 参数：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - -------------- - ---- ------------------ ------------ --------- ---- -- ----------------------- ---- -- ------ ----- ----------------- - ------------------- -------------- --------------- -- -
2. 嵌套路由
嵌套路由是指将一个路由嵌套到另一个路由中，以形成一个父子关系。这使得我们可以将应用程序的某个部分模块化，从而更好地理解和组织我们的代码。以下是一个嵌套路由的示例：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- ------ - ---- ------------------
------ - ------------- - ---- ------------------------
------ - -------------- - ---- --------------------------
------ - ------------- - ---- ------------------------
------ - ---------------- - ---- ------------------------------
------ - ----------------- - ---- --------------------------------
----- ------- ------ - -
-
----- ---
---------- -------
---------- --------------
--
-
----- --------
---------- ---------------
--------- -
-
----- -----------
---------- --------------
--------- -
-
----- ----------
---------- -----------------
--
-
----- -----------
---------- ------------------
--
--
--
--
--
--
-----------
-------- -------------------------------
-------- ---------------
--
------ ----- ---------------- --现在，我们已经在 AboutComponent 内定义了一个子路由 /user/:id，它可以进一步嵌套到 /user/:id 的子路由路径中包含一个 profile 和一个 settings 路径。
3. 路由守卫
路由守卫允许你在路由变化时执行某些操作，例如，检查用户是否有权限进行特定操作、记录用户操作等。
Angular2+ 提供了以下路由守卫：
- CanActivate：用于控制是否可以访问当前路由。
- CanActivateChild：用于控制是否可以访问当前路由的子路由。
- CanDeactivate：用于在离开当前路由时执行操作。
- Resolve：用于在访问当前路由前获取一些数据。
可以通过以下代码示例使用路由守卫：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- ------ - ---- ------------------
------ - ------------- - ---- ------------------------
------ - -------------- - ---- --------------------------
------ - --------- - ---- ---------------
----- ------- ------ - -
-
----- ---
---------- -------
---------- --------------
--
-
----- --------
---------- ---------------
------------ ------------
--
--
-----------
-------- -------------------------------
-------- ---------------
--
------ ----- ---------------- --可以看到， about 路由使用了 AuthGuard 守卫，由于 AuthGuard 实现了 CanActivate 接口，所以只有在 canActivate 方法返回 true 时，才能成功访问这个路由。
总结
在 Angular2+ 中，前端路由是一个非常重要的模块。通过对路由模块进行基础和高级配置，可以实现几乎任何有用的应用程序场景。在实际项目中，我们应该学会使用路由参数、子路由、路由守卫等高级功能，以能够更好地开发和维护我们的应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6468855b968c7c53b08b553a