单页应用（Single Page Application，简称 SPA），随着Web应用的发展，已经成为了前端开发中的常见需求。而 Angular 提供了一套路由机制，能够让我们轻松实现 SPA。
首先，通过 Angular CLI，我们可以使用以下命令来创建一个新的 Angular 应用：
ng new my-app
接着，我们需要在app.module.ts文件中引入路由模块：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
-----------
-------- -
--------------
----------------------
-- ------ --
--
--
------------- -
-- ------ --
--
---------- -
-- -------- --
-
--
------ ----- --------- - -在上面的代码中，我们通过RouterModule.forRoot方法引入了路由模块，这里需要注意的是，forRoot方法只在根模块中调用一次，其余模块应该调用forChild方法。
接下来，我们需要定义路由：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- -------------------
------ - -------------- - ---- --------------------
-----------
-------- -
----------------------
- ----- --- ---------- ------------- --
- ----- -------- ---------- -------------- -
- ----- ----- ----------- -- -
--
--
-------- -
------------
-
--
------ ----- ---------------- - -在上面的代码中，我们通过RouterModule.forRoot方法定义了两个路由：
path: ''表示默认路由，即根路由，对应HomeComponent组件。path: 'about'表示关于页面路由，对应AboutComponent组件。path: '**'表示其他未定义路由，将重定向到根路由。
上面的代码中，我们还使用了export关键字，将引入的路由模块导出，以便在根模块中引入。
最后，在应用的 HTML 文件中，我们需要使用<router-outlet></router-outlet>指令来占位，以便将路由显示出来：
<router-outlet></router-outlet>
至此，我们已经完成了一个基本的单页应用的路由配置，并了解了 Angular 路由的基本用法。
接下来，我们将通过示例代码来深入学习一些高级路由用法。
1. 子路由
有时候，我们需要在一个页面中通过路由来显示不同的子页面，这时候就需要用到 Angular 的子路由。
子路由的定义方式比较简单，只需要在父级路由中定义一个子路由即可：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - --------------- - ---- ---------------------
------ - -------------- - ---- --------------------
-----------
-------- -
-----------------------
-
----- ---------
---------- ----------------
--------- -
-
----- --------
---------- --------------
-
-
--
- ----- ----- ----------- -- -
--
--
-------- -
------------
-
--
------ ----- ---------------- - -在上面的代码中，我们在path: 'parent'路由下定义了path: 'child'子路由，对应ChildComponent组件。
父级路由的组件中需要使用<router-outlet></router-outlet>指令来占位，以便将子路由显示出来。
2. 路由守卫
有时候，在用户访问某个路由之前，我们需要检查某些条件，比如用户是否登录等。这时候就需要用到路由守卫。
路由守卫使用CanActivate接口来实现：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------------ ----------------------- -------------------- -------- ------ - ---- ------------------
------ - ---------- - ---- -------
-------------
----------- ------
--
------ ----- --------- ---------- ----------- -
------------------- ------- ------- --
------------
----- -----------------------
------ --------------------- ------------------ - -------- - --------------- - -------- - ------- - ------- -
-- --------
----- --------------- - -----
-- ------------------ -
-- -----------------
---------------------------------
------ ------
-
------ -----
-
-在上面的代码中，我们实现了一个简单的路由守卫，检查用户是否登录，如果未登录则重定向到登录页面。
接下来，我们需要在路由配置中注册守卫：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- -------------------
------ - -------------- - ---- --------------------
------ - -------------- - ---- --------------------
------ - --------- - ---- ---------------
-----------
-------- -
----------------------
- ----- --- ---------- ------------- --
- ----- -------- ---------- --------------- ------------ ----------- -
- ----- -------- ---------- -------------- -
- ----- ----- ----------- -- -
--
--
-------- -
------------
-
--
------ ----- ---------------- - -在上面的代码中，我们在path: 'about'路由中注册了AuthGuard守卫，表示该路由需要检查用户是否登录。
3. 路由参数
有时候，我们需要在路由中传递一些参数，比如进行搜索时需要传递关键字。这时候就需要使用路由参数。
路由参数通过{ path: 'users/:id', component: UserComponent }这样的形式来定义，其中id为路由参数。
接下来，在组件中使用ActivatedRoute服务来访问路由参数：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - -------------- - ---- ------------------
------------
--------- -----------
--------- -
-------- -- -- -------
--
--
------ ----- ------------- ---------- ------ -
---- -------
------------------- ------ --------------- --
---------- -
------- - ----------------------------------------
-
-在上面的代码中，我们通过ActivatedRoute服务来访问路由参数id，并将其赋值给组件中的id变量。
总结
本篇文章主要介绍了 Angular 路由的基础用法、子路由、路由守卫和路由参数等高级用法，并通过示例代码进行了详细讲解。希望本文对大家学习 Angular 路由有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c08b8483d39b48814d8535