在使用 AngularJS 开发单页面应用（SPA，Single Page Application）时，路由是必不可少的部分。而对于包含多级路由的 SPA，需要对路由的实现方式有更深入的了解和掌握。
多级路由简介
多级路由（nested routing）是指当某个路由下还有其他路由。例如，一个在线商城的单页面应用中，首页下有“服装”和“家具”两个大类，而“服装”下又有“男装”和“女装”两个小类，这就是多级路由结构。
多级路由实现
AngularJS 提供了 ngRoute 模块来处理 SPA 的路由。而对于多级路由的实现，需要使用 AngularJS 的 $routeProvider 服务，并组合使用嵌套的 ng-view 指令。
基本路由配置
假设我们有以下几个页面：
- 首页
- 产品页
- 产品详情页
那么我们可以将它们的路由配置文件定义如下：
----------------------- ------------
-------------------------------- -
--------------
---------- -
------------ ---------------------
----------- ----------
--
------------------ -
------------ -------------------------
----------- --------------
--
--------------------- -
------------ ------------------------
----------- -------------
--
------------
----------- ---
---
---以上配置中，我们已经可以访问首页、产品页和产品详情页的路由了。但是，如果现在我们需要增加一级路由，如“服装”或“家具”，该如何处理呢？
嵌套路由配置
针对上述需求，我们可以通过增加一层路由配置来实现：
----------------------- ------------
-------------------------------- -
--------------
---------- -
------------ ---------------------
----------- ----------
--
-------------------------------- -
------------ -------------------------
----------- --------------
--
----------------------------------------- -
------------ -------------------------
----------- --------------
--
--------------------------------------------- -
------------ ------------------------
----------- -------------
--
------------
----------- ---
---
---注意到上述配置中，我们使用了 :categoryName 这个动态参数，它代表我们要访问的“服装”或“家具”等分类名称。在 CategoryCtrl 控制器中，我们可以通过 $routeParams 服务来获取该参数：
----------------------- --------------------------- ---------------- ------------- - ------------------- - -------------------------- ---
此时，我们已经完成了嵌套路由的配置，可以通过 /category/:categoryName、/category/:categoryName/products 和 /category/:categoryName/products/:id 三个路由访问到不同的页面。
嵌套视图配置
针对嵌套路由，我们还需要对视图进行嵌套配置。这就需要使用嵌套的 ng-view 指令。
例如，在 category.html 中，我们需要显示出两个子页面：产品列表和产品详情。那么我们就可以这样编写 category.html 的模板：
----- ---------- ------------ ------ ---- -------------- ------
在加载 category.html 页面时，这里的 ng-view 指令会被替换为对应的子页面模板。
同理，在 products.html 中也需要使用 ng-view 来加载子页面。
示例代码
下面是一个完整的多级路由示例，仅供参考：
----------------------- ------------
-------------------------------- -
--------------
---------- -
------------ ---------------------
----------- ----------
--
-------------------------------- -
------------ -------------------------
----------- --------------
--
----------------------------------------- -
------------ -------------------------
----------- --------------
--
--------------------------------------------- -
------------ ------------------------
----------- -------------
--
------------
----------- ---
---
--
----------------------- ---------------- -
-------------- - --------
--
--------------------------- ---------------- ------------- -
------------------- - --------------------------
--
--------------------------- ---------------- ------------- -
------------------- - --------------------------
--------------- - -
- --- -- ----- --- -- --
- --- -- ----- --- -- --
- --- -- ----- --- -- -
--
--
-------------------------- ---------------- ------------- -
------------------- - --------------------------
---------------- - ----------------
---对应的模板文件：
---- ---------- ---
---- ---------------
----
------ ---------------------
------ --------------------------------------
------ ---------------------------------------
-----
---- --------------
------
---- --------- ---
----- ------- ------
---- ------------- ---
---------- ------------ ------
----
------ ------------------- ------------ --------------------------
-----
---- --------------
---- ------------- ---
---------- ------------ ------
----
--- ------------------ -- ------------ ------------------- ------------ -------------- ---------- ------ ------------ -----------
-----
---- ------------ ---
---------- ------------ ------
---------- --------- ------我们通过访问 index.html 页面，并在顶部的导航栏中选择“服装”或“家具”，就可以看到多级路由的实现效果。
总结
对于 SPA 中的多级路由，我们需要使用 $routeProvider 和 ng-view 组合来实现。在路由配置中，我们可以使用动态参数的方式来处理不同层级之间的相关信息。而在视图模板中，ng-view 嵌套则是支持嵌套路由的关键。掌握了这些基础知识后，我们可以更轻松地搭建和维护多级路由，从而打造出更加优秀的单页面应用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64fabc33f6b2d6eab318de6a