AngularJS如何监听路由变化？具体方法有哪些？

AngularJS 作为一款经典的前端框架，其路由管理功能（通过 ngRoute 模块或 ui-router 模块）是实现单页应用（SPA）页面的核心，在开发过程中，监听路由变化的需求十分常见，在路由切换时加载页面数据、记录用户访问轨迹、执行权限校验、销毁不再需要的资源等，本文将详细介绍 AngularJS 中监听路由变化的几种常用方法,并分析其适用场景与实现细节。

基于 $routeChange 事件的监听（ngRoute 模块）

当使用 AngularJS 内置的 ngRoute 模块进行路由配置时，框架提供了一系列以 $routeChange 开头的事件，这些事件在路由生命周期中的不同阶段触发，开发者可以通过 $rootScope 或 $scope 监听这些事件来实现相应的逻辑处理。

核心事件类型

$routeChange 事件主要包括以下三种，它们按顺序触发,共同构成了路由变化的完整流程：

实现方式

通过 $rootScope 的 $on 方法可以全局监听路由事件，通常在应用的入口文件（如 app.js）或配置路由的模块中实现,示例代码如下：

// 在 AngularJS 模块配置中或控制器中
angular.module('myApp').run(function($rootScope) {
    // 监听路由开始事件
    $rootScope.$on('$routeChangeStart', function(event, next, current) {
        console.log('路由开始变化', next, current);
        // 示例：权限校验逻辑
        if (next.requiresAuth && !isAuthenticated()) {
            event.preventDefault(); // 阻止路由跳转
            $location.path('/login');
        }
    });
    // 监听路由成功事件
    $rootScope.$on('$routeChangeSuccess', function(event, next, current) {
        console.log('路由变化成功', next, current);
        // 示例：修改页面标题
        $document[0].title = next.title || '默认标题';
    });
    // 监听路由错误事件
    $rootScope.$on('$routeChangeError', function(event, current, next, error) {
        console.error('路由变化出错', error);
        // 示例：显示错误提示
        $scope.errorMessage = '页面加载失败，请稍后重试。';
    });
});

注意事项：在 $routeChangeStart 事件中调用 event.preventDefault() 可以有效阻止路由的默认跳转行为，这对于实现路由拦截至关重要，由于 $rootScope 上的事件监听器在应用整个生命周期内都会存在，需注意在不再需要时手动移除（如使用 $rootScope.$off）,以避免内存泄漏。

基于 $stateChange 事件的监听（ui-router 模块）

ui-router 是 AngularJS 社区更强大的路由解决方案，它提供了基于状态（State）的路由管理，功能比 ngRoute 更丰富，监听路由变化主要通过 $stateChange 事件实现。

核心事件类型

ui-router 的事件命名与 ngRoute 类似,但参数和功能上有所扩展：

实现方式

与 ngRoute 类似，通过 $rootScope 监听 $stateChange 事件,示例代码如下：

angular.module('myApp').run(function($rootScope, $state) {
    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
        console.log('状态开始切换', toState, toParams);
        // 示例：基于状态数据的权限校验
        if (toState.data.requiresAuth && !isAuthenticated()) {
            event.preventDefault();
            $state.go('login');
        }
    });
    $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
        console.log('状态切换成功', toState);
        // 示例：记录用户访问轨迹
        trackUserVisit(toState.name);
    });
});

优势：ui-router 的事件参数包含了更详细的状态信息（如 toState.data），便于在路由配置中直接附加元数据（如权限标识、页面标题等），使代码结构更清晰。ui-router 还支持嵌套状态,其事件机制也能很好地处理父子状态之间的切换逻辑。

基于 $locationChange 事件的通用监听

除了路由模块提供的事件外，AngularJS 的 $location 服务本身也提供了 $locationChangeStart 和 $locationChangeSuccess 事件，这两个事件在 URL 发生变化时触发，无论变化是否由路由引起（直接修改浏览器地址栏的 URL 或使用 $location.path() 方法手动跳转）。

事件特点

实现示例

angular.module('myApp').run(function($rootScope, $location) {
    $rootScope.$on('$locationChangeStart', function(event, nextUrl, currentUrl) {
        console.log('URL 开始变化', nextUrl, currentUrl);
        // 示例：防止用户未保存数据时离开页面
        if (hasUnsavedChanges()) {
            event.preventDefault();
            if (confirm('您有未保存的数据，确定要离开吗？')) {
                // 如果用户确认，则清除未保存标记并允许跳转
                        clearUnsavedChanges();
                        $location.url(nextUrl.substring($location.$$protocol + '://' + $location.$$host + $location.$$port + '/'));
            }
        }
    });
});

局限性：由于 $location 事件不区分路由变化和普通 URL 变化，因此在实际开发中，通常需要结合 $route 或 $state 服务进行判断，以确认是否为路由触发的变化，在 $locationChangeSuccess 事件中，可以通过 $route.current 或 $state.current 来获取当前路由状态,从而执行针对性的逻辑。

总结与最佳实践

在 AngularJS 中监听路由变化，应根据项目使用的路由模块（ngRoute 或 ui-router）和具体需求选择合适的方法：

1. 优先使用路由模块专用事件：对于基于路由的业务逻辑（如权限控制、页面数据加载），优先使用 $routeChange 或 $stateChange 系列事件，因为这些事件与路由生命周期强相关,参数信息更贴合路由场景。
2. 全局 URL 变化监听需谨慎：使用 $locationChange 事件时，需注意区分路由变化和手动 URL 修改,避免不必要的逻辑执行。
3. 事件监听器的生命周期管理：在控制器或其他作用域中监听事件时，应在 $scope 的 $onDestroy 生命周期钩子中移除事件监听器，防止内存泄漏。

    angular.module('myApp').controller('MyController', function($scope, $rootScope) {
        const offFn = $rootScope.$on('$routeChangeSuccess', myHandler);
        $scope.$on('$destroy', function() {
            offFn(); // 移除监听器
        });
    });

4. 结合路由元数据：无论是 ngRoute 的 resolve 还是 ui-router 的 data，都可以在路由配置中定义元数据，然后在事件监听器中读取这些元数据，实现逻辑与配置的分离,提高代码可维护性。

通过合理运用上述方法，开发者可以高效地实现 AngularJS 应用中的路由变化监听，构建出逻辑清晰、交互流畅的单页应用。