在使用 Angular 开发 web 应用程序时，路由是一个必不可少的组件。通过 Angular 提供的路由模块，我们可以轻松地实现单页面应用程序（SPA）的路由，提高用户体验并优化应用程序性能。本文将教你如何使用 Angular 路由模块来实现路由功能。
1. 路由模块的导入
要使用 Angular 路由模块，必须先将其导入到你的应用程序模块中。在应用程序模块中，可以使用以下代码导入路由模块：
import { RouterModule } from '@angular/router';2. 配置路由
配置路由是使用 Angular 路由模块的第一步。在 Angular 中，我们可以通过使用路由配置来告诉应用程序哪些组件与哪些 URL 相关联。以下是一个基本的路由配置的示例：
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'contact', component: ContactComponent },
];在这个示例中，我们定义了三个路由。这三个路由分别与空路径（即应用程序的根路径）、/about 和 /contact 相对应。而这三个路由在 URL 发生改变时会分别展示 HomeComponent、AboutComponent 和 ContactComponent。
同时，你还可以使用以下选项来修改路由的默认行为：
pathMatch：定义如何匹配 URL。有两个可选值：'prefix'（URL 必须以路由的 path 字段开头）和 'full'（URL 必须与路由的 path 字段完全匹配）。redirectTo：定义路由重定向的 URL。data：路由所需的任何其他数据，如页面标题、面包屑等。
在路由配置完成后，你需要将其传递给 RouterModule.forRoot() 方法来注册它们。以下是一个完整的路由模块导入和配置示例代码：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- ------ - ---- ------------------ ------ - ------------- - ---- ------------------- ------ - -------------- - ---- -------------------- ------ - ---------------- - ---- ---------------------- ----- ------- ------ - - - ----- --- ---------- ------------- -- - ----- -------- ---------- -------------- -- - ----- ---------- ---------- ---------------- -- -- ----------- -------- - ---------------------------- -- -------- - ------------ - -- ------ ----- ---------------- --
3. 路由的使用
在配置完路由后，你需要在 HTML 模板中使用 Angular 的 RouterLink 指令来实现路由的导航。以下是一个实现路由导航的示例：
<ul> <li><a routerLink="">Home</a></li> <li><a routerLink="/about">About</a></li> <li><a routerLink="/contact">Contact</a></li> </ul>
在这个示例中，我们使用 RouterLink 指令来为诸如 Home、About 和 Contact 之类的标签添加路由导航功能。当用户单击其中一个链接时，路由会根据配置的路径和组件来确定将要显示的内容。
除了 RouterLink 指令之外，你还可以使用 Router 服务在代码中进行编程式导航。以下是一个编程式导航的示例：
-- -------------------- ---- -------
------ - ------ - ---- ------------------
-----------------
------ ----- ------------ -
------------------- ------- ------- --
--------------- -
---------------------------------
-
----------------- -
-----------------------------------
-
-在这个示例中，我们使用 Router 服务的 navigate 方法在代码中实现了路由导航功能。当我们调用 goToAboutPage 和 goToContactPage 方法时，路由会根据路由配置来导航到相应的页面。
4. 路由守卫
除了基本的路由配置和导航之外，Angular 还提供了路由守卫功能。路由守卫可以让你在路由导航时执行一些操作，例如验证用户是否具有访问权限、提醒用户是否真的要离开当前页面等。以下是一个路由守卫的示例：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------------ ----------------------- ------------------- - ---- ------------------
-------------
------ ----- --------- ---------- ----------- -
------------------ ----------------------- ------ -------------------- -
-- -------------- -
------ -----
- ---- -
------ ------
-
-
-在这个示例中，我们定义了一个名为 AuthGuard 的路由守卫。当路由导航时，Angular 将会调用 canActivate 方法来验证当前用户是否已经登录。如果用户已经登录，则 canActivate 方法将返回 true，路由导航将继续。如果用户未登录，则 canActivate 方法将返回 false，路由导航将被阻止。
为了使用 AuthGuard 路由守卫，你需要将其作为一个提供者注入到路由模块中。以下是一个使用 AuthGuard 路由守卫的示例：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- ------ - ---- ------------------ ------ - ------------- - ---- ------------------- ------ - -------------- - ---- -------------------- ------ - ---------------- - ---- ---------------------- ------ - --------- - ---- --------------- ----- ------- ------ - - - ----- --- ---------- ------------- -- - ----- -------- ---------- --------------- ------------ ----------- -- - ----- ---------- ---------- ----------------- ------------ ----------- -- -- ----------- -------- - ---------------------------- -- -------- - ------------ -- ---------- - --------- - -- ------ ----- ---------------- --
在这个示例中，我们将 AuthGuard 提供者注入到了 AppRoutingModule 路由模块中。对于需要认证的路由，我们在路由配置中使用 canActivate 选项来指定要使用的路由守卫。
结论
在本文中，我们介绍了如何使用 Angular 路由模块来实现路由功能。我们了解了路由模块的导入和配置、路由的使用和编程式导航，以及路由守卫的使用。希望这篇文章能够帮助你了解路由模块的基本知识，并且让你在开发 Angular 应用程序时更加顺畅。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6770b46be9a7045d0d802310