ui-router 0.3.2正则路由参数历史回退时不触发$stateChangeStart

我之前也碰到过类似的坑，在ui-router 0.3.x版本里，带正则约束且允许空值的参数路由，确实会出现浏览器回退时不触发$stateChangeStart的情况，咱们来一步步拆解问题和解决办法：

问题根源 #

ui-router 0.3.x对正则参数的历史状态追踪存在一个小bug：你的counter1路由里，id参数用(NEW-ID-\d+|)的正则允许空值，这种分支式的空值写法，会让框架在处理浏览器历史回退时，无法正确识别状态的参数变化，进而跳过了$stateChangeStart事件的触发。而counter2用的普通:id参数，框架的历史追踪逻辑对这种格式更兼容，所以不会出问题。

可行解决方案 #

1. 调整正则表达式写法（推荐） #

把{id:(NEW-ID-\d+|)}改成用可选匹配的方式实现空值允许，修改后的路由地址：

'/counter1/{id:(NEW-ID-\d+)?}?detail'

这种写法更符合ui-router对正则参数的预期处理逻辑，能让框架正确识别参数的变化，回退时就会正常触发$stateChangeStart了。

2. 用$locationChangeStart做替代监听 #

如果暂时不想修改路由规则，可以监听$locationChangeStart事件——它在浏览器历史变化（包括回退）时一定会触发，你可以在事件里手动处理状态变化逻辑：

app.run(function($rootScope, $state) {
  $rootScope.$on('$locationChangeStart', function(event, newUrl, oldUrl) {
    // 解析新旧URL对应的状态（可根据你的路由结构调整解析逻辑）
    const newStateName = $state.href(newUrl).split('/')[1];
    const oldStateName = $state.href(oldUrl).split('/')[1];
    if (newStateName === 'counter1' || oldStateName === 'counter1') {
      // 执行原本在$stateChangeStart里的业务逻辑
      console.log('counter1状态即将变更');
    }
  });
});

不过这种方式需要自己处理状态解析，不如调整路由规则来得优雅。

3. 升级ui-router版本（若项目允许） #

ui-router 1.x版本已经修复了大量这类历史状态处理的bug，如果你的项目兼容升级，建议直接升到1.x版本，不仅能解决这个问题，还能获得更多稳定性和新特性。不过升级时要注意兼容问题，比如状态定义的配置项有一些调整。

验证方式 #

修改后可以这样测试：

• 进入带参数的counter1路由，比如/counter1/NEW-ID-123?detail=yes
• 跳转到counter2或其他状态
• 点击浏览器回退按钮，检查控制台是否有$stateChangeStart触发的日志，或者你在事件中的处理逻辑是否正常执行

内容的提问来源于stack exchange，提问作者Daniel A. R. Werner