什么是多页应用？
多页应用（MPA）是指在一个网站中包含多个独立页面的应用程序。每个页面都有自己的 HTML、CSS 和 JavaScript 文件，并且每个页面都需要重新加载。
相比之下，单页应用（SPA）是指在一个页面中加载所有的 HTML、CSS 和 JavaScript 文件，并通过 JavaScript 动态更新页面内容，不需要重新加载整个页面。
为什么要使用多页应用？
多页应用的优点在于：
- 更好的 SEO（搜索引擎优化）：每个页面都有自己的 URL 和元数据，可以更好地被搜索引擎收录和检索。
- 更容易实现：相比单页应用，多页应用更容易实现和维护。
- 更适合某些场景：例如需要在不同页面之间传递数据或状态，或需要在不同页面之间共享登录状态等情况。
Angular 7.x 的路由功能
Angular 7.x 提供了强大的路由功能，可以帮助我们轻松地实现多页应用。
安装路由模块
首先，我们需要安装 Angular 的路由模块。可以使用 npm 命令进行安装：
npm install --save @angular/router
配置路由
在 Angular 中，路由配置是通过定义一个路由数组来实现的。每个路由都包含一个路径和一个组件，当用户访问该路径时，会加载对应的组件。
在 app.module.ts 中导入 RouterModule 和 Routes，并定义路由数组：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- ------ - ---- ------------------ ------ - ------------- - ---- ------------------------ ------ - -------------- - ---- -------------------------- ------ - ---------------- - ---- ------------------------------ ----- ------- ------ - - - ----- --- ---------- ------------- -- - ----- -------- ---------- -------------- -- - ----- ---------- ---------- ---------------- -- -- ----------- -------- ------------------------------- -------- -------------- -- ------ ----- ---------------- - -
上面的代码定义了三个路由：一个空路径对应 HomeComponent 组件，/about 路径对应 AboutComponent 组件，/contact 路径对应 ContactComponent 组件。
在组件中使用路由
在组件中，可以通过 Router 服务来实现路由导航。例如，在 HomeComponent 组件中，可以添加一个按钮，点击该按钮时跳转到 /about 路径：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------ - ---- ------------------
------------
--------- -----------
--------- -
----------- -- ---- --------------
------- ------------------------ -- ----- ------------------
-
--
------ ----- ------------- -
------------------- ------- ------- - -
----------- -
---------------------------------
-
-在上面的代码中，我们注入了 Router 服务，并在 goToAbout 方法中使用 navigate 方法来实现路由导航。
在模板中使用路由
在模板中，可以使用 routerLink 指令来实现路由导航。例如，在 app.component.html 中，可以添加一个导航栏，用于在不同页面之间切换：
<nav>
<ul>
<li><a routerLink="/">Home</a></li>
<li><a routerLink="/about">About</a></li>
<li><a routerLink="/contact">Contact</a></li>
</ul>
</nav>
<router-outlet></router-outlet>在上面的代码中，我们使用 routerLink 指令来定义导航链接，当用户点击链接时，会自动进行路由导航。
示例代码
以下是一个完整的示例代码，可以帮助你更好地理解 Angular 7.x 的路由功能：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------- ------ - ---- ------------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- ------------------------
------ - -------------- - ---- --------------------------
------ - ---------------- - ---- ------------------------------
----- ------- ------ - -
- ----- --- ---------- ------------- --
- ----- -------- ---------- -------------- --
- ----- ---------- ---------- ---------------- --
--
-----------
------------- -
-------------
--------------
---------------
----------------
--
-------- -
--------------
----------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - --- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------ - ---- ------------------
------------
--------- -----------
--------- -
----------- -- ---- --------------
------- ------------------------ -- ----- ------------------
-
--
------ ----- ------------- -
------------------- ------- ------- - -
----------- -
---------------------------------
-
--- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ------------
--------- -
----------- -- ----- --------------
------- -------------------------- -- ------- ------------------
-
--
------ ----- -------------- -
------------------- ------- ------- - -
------------- -
-----------------------------------
-
--- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- --------------
--------- -
----------- -- ------- --------------
------- ----------------------- -- ---- ------------------
-
--
------ ----- ---------------- -
------------------- ------- ------- - -
---------- -
----------------------------
-
--- -------------------- ---- -------
---- ------------------ ---
-----
----
------ ----------------------------
------ ----------------------------------
------ --------------------------------------
-----
------
-------------------------------总结
本文介绍了 Angular 7.x 的路由功能，并且通过示例代码演示了如何利用路由实现多页应用。希望本文能够对前端开发者有所帮助，让大家更好地掌握 Angular 的路由功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/663d656dd3423812e4b6c99d