解决ui-router路由监听$stateChangeStart、$stateChangeSuccess、$stateChangeError不执行的问题

问题解答

angular1项目导入ui-router之后，使用路由监听，代码如下

　angular.module('app', ['ui.router', 'ui.router.state.events'])

angular.module("app")
    .run(['$rootScope', function ($rootScope) {

  　　　// 监听路由开始时触发
  　　  $rootScope.$on('$stateChangeStart', function () {}

　　　  // 监听路由成功时触发
  　　  $rootScope.$on('$stateChangeSuccess', function () {}

　　　  // 监听路由出现错误时触发
  　　  $rootScope.$on('$stateChangeStart', function () {}
　 }) 
}])

当切换路由的时候，原本应该会监听到路由的变化，但是实际却没有走这个路由监听器，这是为什么呢？答案如下：

这时需要在index.html导入一个stateEvents.js库文件，解决路由监听不到的问题(PS:必须在angular.module主模块下注入'ui.router.state.events')

附上ui-router官方教程地址：https://ui-router.github.io/ng1/

附上stateEvents.js官方教程地址：https://ui-router.github.io/ng1/docs/latest/modules/ng1_state_events.html#_statechangeerror

 

参数解读

根据stateEvents.js官方教程地址，路由监听提供的参数部分翻译

event：           该事件的基本信息

toState:           得到当前路由的信息，比如路由名称，url,视图的控制器，模板路径等

toParams:       得到当前路由的参数

fromState：    得到上一个路由的信息，比如路由名称，url,视图的控制器，模板路径等

fromParams：得到上一个路由的参数

 

后记

如有不对的地方，还望大家指正，共同进步