AngularJS 是一款非常流行的前端框架，它的单页应用（SPA）特性给我们带来了很多便利。而路由则是单页应用的重要组成部分。在使用 AngularJS 开发单页应用时，我们需要进行合理的路由配置，以便用户可以快速、稳定地访问想要的页面。在这篇文章中，我们将分享一些 AngularJS SPA 中路由配置的小技巧，帮助你搞定 10 个常见问题。
问题一：如何设置默认路由？
默认路由是用户访问应用时的第一站，一般为首页。在 AngularJS 中，我们可以通过 $routeProvider 的 otherwise 方法来设置默认路由。示例代码如下所示：
-- -------------------- ---- -------
----------------------- ------------
-------------------------- -------- ---------------- -
--------------
-------------- -
------------ ------------------
----------- -----------------
------------- ----
--
--------------- -
------------ -------------------
----------- ------------------
------------- ----
--
------------
----------- -------
---
----上述代码中的 otherwise 方法会将用户未匹配到的路由重定向到 /home 路由。
问题二：如何使用动态参数？
有时候，我们需要在路由中使用动态参数，以便用户可以根据需求自由切换。在 AngularJS 中，我们可以使用冒号 (:) 来定义动态参数，同时在控制器中使用 $routeParams 来获取该参数的值。示例代码如下所示：
-- -------------------- ---- -------
----------------------- ------------
-------------------------- -------- ---------------- -
--------------
---------------------- -
------------ ------------------
----------- -----------------
------------- ----
---
---
----------------------------- ---------------- -------- -------------- -
--- -- - -----
--------- - --------------------
----上述代码中的 $routeParams.userId 将获取路由中的 userId 参数值。
问题三：如何使用嵌套路由？
有时候，我们需要使用嵌套路由来组织应用的结构，让用户可以更清楚地浏览。在 AngularJS 中，我们可以通过在父路由中定义 ng-view 来设置子路由。示例代码如下所示：
-- -------------------- ---- -------
----------------------- ------------
-------------------------- -------- ---------------- -
--------------
------------ -
------------ ----------------
----------- ---------------
------------- ----
--
------------------ -
------------ ----------------------
----------- --------------------
------------- ----
---
----上述代码中 /me/posts 路由就是 /me 路由的一个子路由，同时 me.html 模板中的 ng-view 标签将被 posts.html 模板填充。
问题四：如何在路由中使用 resolve 列表？
有时候，我们需要在路由中使用 resolve 列表来确保所有依赖都已经准备好，然后再加载模板。在 AngularJS 中，我们可以使用 resolve 属性来设置 resolve 列表。示例代码如下所示：
-- -------------------- ---- -------
----------------------- ------------
-------------------------- -------- ---------------- -
--------------
--------------- -
------------ -------------------
----------- ------------------
------------- -----
-------- -
----- --------------- -------- ------------- -
------ ----------------------
--
-
---
----上述代码中，resolve 列表中的 user 依赖项将在路由加载之前通过 authService.getUser() 方法解析。
问题五：如何使用控制器别名？
有时候，我们需要使用控制器别名以便在 ng-controller 中使用不同的别名。在 AngularJS 中，我们可以在路由中使用 controllerAs 属性设置控制器别名。示例代码如下所示：
-- -------------------- ---- -------
----------------------- ------------
-------------------------- -------- ---------------- -
--------------
-------------- -
------------ ------------------
----------- -----------------
------------- ----
---
---
----------------------------- ---------- -------- -------- -
------------ - -------- -- -- ---- ------
----上述代码中，控制器别名为 vm，可以通过 $scope.vm 来访问控制器中的属性。
问题六：如何设置 HTML5 模式？
在 AngularJS 中，默认的路由是通过哈希标记 (#) 来设置的，这在有些场景下不太适合，比如在 SEO 优化时。在这种情况下，我们可以使用 HTML5 模式。在 AngularJS 中，我们可以通过 $locationProvider 服务的 html5Mode 方法来设置 HTML5 模式。示例代码如下所示：
-- -------------------- ---- -------
----------------------- ------------
-------------------------- -------------------- -------- ---------------- ------------------ -
--------------
-------------- -
------------ ------------------
----------- -----------------
------------- ----
---
----------------------------------
----上述代码中的 $locationProvider.html5Mode(true) 将设置 HTML5 模式。
问题七：如何使用重定向路由？
有时候，我们需要使用重定向路由来自动跳转到另一个路由。在 AngularJS 中，我们可以通过 $routeProvider 的 redirectTo 属性来实现。示例代码如下所示：
-- -------------------- ---- -------
----------------------- ------------
-------------------------- -------- ---------------- -
--------------
------------------- -
------------ -----------------------
----------- ----------------------
------------- ----
--
-------------- -
----------- ------------
---
----上述代码中 /dash 路由将自动重定向到 /dashboard 路由。
问题八：如何在路由变化时执行函数？
有时候，我们需要在路由变化时执行特定的函数。在 AngularJS 中，我们可以使用 $routeChangeStart、$routeChangeSuccess 事件来实现。示例代码如下所示：
-- -------------------- ---- -------
----------------------- ------------
-------------------------- -------- ---------------- -
--------------
-------------- -
------------ ------------------
----------- -----------------
------------- ----
--
--------------- -
------------ -------------------
----------- ------------------
------------- ----
---
---
------------------- -------- ------------ -
----------------------------------- -------- ------- ----- -------- -
------------------ ------ ----------
---
------------------------------------- -------- ------- -------- --------- -
------------------ ------ ----------
---
----上述代码中，在 run 块中注册的 $routeChangeStart 和 $routeChangeSuccess 事件将在路由变化时被触发。
问题九：如何使用 resolve 拦截器？
有时候，我们需要使用 resolve 拦截器来进行特定的业务逻辑操作。在 AngularJS 中，我们可以在 resolve 列表中使用函数来实现。示例代码如下所示：
-- -------------------- ---- -------
----------------------- ------------
-------------------------- -------- ---------------- -
--------------
------------------ -
------------ ------------------
----------- -----------------
------------- -----
-------- -
----- --------- --------- -------- ------- ------- -
------ -------
------- ------
---- ------------ - ------------------------
---
--
-
---
---
----------------------------- -------- -------- ------ -
--- -- - -----
------- - -----
----上述代码中的 resolve 方法将在路由加载前执行，返回的数据将传递给控制器。
问题十：如何在路由变化时进行身份验证？
身份验证是应用安全的重要组成部分。在 AngularJS 中，我们可以通过解析 $locationChangeStart 事件来进行身份验证。示例代码如下所示：
-- -------------------- ---- -------
----------------------- ------------
-------------------------- -------- ---------------- -
--------------
-------------- -
------------ ------------------
----------- -----------------
------------- ----
--
--------------- -
------------ -------------------
----------- ------------------
------------- ----
---
---
------------------- ------------ -------------- -------- ------------ ---------- ------------ -
-------------------------------------- -------- ------- ----- -------- -
-- ----------------- --- -------- -- ------------------------------- -
-------------------------
-
---
----上述代码中，authService.isAuthenticated() 方法将返回用户是否已经登录，如果用户未登录，则会跳转到登录界面。
总结
以上就是 AngularJS SPA 路由配置小技巧，搞定 10 个常见问题的内容。希望本文能对你有所帮助，让你更好地理解和使用 AngularJS 路由。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fb64fdf6b2d6eab31e0137