Angular 是一个前端框架，用于开发单页面和动态 Web 应用。其中，@angular/router 是一个官方提供的 Angular 路由模块，用于在应用程序中管理导航。
安装 @angular/router
在开始使用 @angular/router 之前，我们需要将其安装为项目的依赖项。打开命令行界面，切换到项目目录，然后执行以下命令：
npm install @angular/router --save
导入 RouterModule
接下来，在应用程序的 module 文件中，导入 RouterModule 模块，并将其添加到 NgModule 的 imports 数组中：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- -------------------
------ - -------------- - ---- --------------------
-----------
-------- -
--------------
----------------------
- ----- --- ---------- ------------- --
- ----- -------- ---------- -------------- --
--
--
------------- -
-------------
--------------
--------------
--
---------- --------------
--
------ ----- --------- - -创建路由配置
@angular/router 提供了三个路由类型：path、component 和 redirect。其中，path 和 component 是必需的，用于指定 URL 和该 URL 对应的组件。而 redirect 可选，用于重定向 URL。
例如，我们需要为 HomeComponent 和 AboutComponent 分别创建路由配置：
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent }如上所示，我们将 HomeComponent 组件与空路径关联，将 AboutComponent 组件与路径 'about' 关联。这意味着，当访问应用程序的根 URL 时，将显示 HomeComponent 组件；当访问路径 '/about' 时，将显示 AboutComponent 组件。
使用 RouterLink 指令
除了在路由配置中指定 URL 与组件的对应关系外，我们还需要在应用程序的 HTML 模板中添加路由导航链接。为此，我们可以使用 RouterLink 指令。
例如，我们可以在应用程序的导航栏中添加两个链接，分别跳转到 HomeComponent 和 AboutComponent：
<ul> <li><a routerLink="">Home</a></li> <li><a routerLink="about">About</a></li> </ul>
如上所示，在 a 标签中添加 routerLink 属性，可以使其具有路由导航功能。其中，空字符串表示根路径，'about' 表示路径 '/about'。
使用 Router 服务
除了在 HTML 模板中使用 RouterLink 指令外，我们还可以在组件类中使用 Router 服务，以编程方式执行路由导航。
例如，我们可以在 HomeComponent 组件中添加一个按钮，点击后将路由导航到 AboutComponent：
-- -------------------- ---- -------
------ - ------ - ---- ------------------
------------
--------- -----------
--------- -
-------- --------------
------- ------------------------ -- --------------
-
--
------ ----- ------------- -
------------------- ------- ------- --
----------- -
------------------------------------
-
-如上所示，我们在 HomeComponent 组件中注入了 Router 服务，并在模板中添加一个按钮，绑定 click 事件，触发 gotoAbout 方法。该方法调用 Router 服务的 navigateByUrl 方法，以编程方式将路由导航到路径 '/about'。
总结
通过上述步骤，我们已经成功地添加了 @angular/router 模块，并为 HomeComponent 和 AboutComponent 创建了路由配置，同时在 HTML 模板中添加了路由导航链接，以及在 HomeComponent 组件中添加了一个按钮，以编程方式执行路由导航。
相信本教程可以帮助你更好地学习和掌握 @angular/router 模块的使用，提高前端开发的技能水平。完整的示例代码可以在我的 GitHub 上找到：
https://github.com/example/angular-router-demo.git
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/108030