AngularJS 1.6 UI Router多过渡钩子多路由匹配问题

嘿，你碰到的这个问题其实是因为JavaScript对象里不能有重复的属性键——你写了两个from，后面的会直接覆盖前面的，所以肯定会出错啦。下面给你两种靠谱的实现方式：

方式一：使用数组指定多个路由匹配模式 #

AngularJS UI Router的$transitions钩子支持用数组来传递多个匹配规则，直接把你需要的路由模式放进from数组里就行：

$transitions.onBefore({ from: ['liste.**', 'demand.**'] }, function(transition) {
  // 这里写你要执行的代码，只会在离开liste或demand开头的路由时触发
  console.log('离开liste或demand相关路由啦');
});

这种方式最直接，适合你这种明确知道要匹配哪些路由模式的场景。

方式二：使用自定义匹配函数（更灵活） #

如果你的匹配规则比较复杂，或者需要动态判断，还可以用一个函数来做匹配逻辑。我们可以给钩子传一个空的匹配对象，然后在回调函数里手动检查当前离开的路由是否符合条件：

$transitions.onBefore({}, function(transition) {
  const fromState = transition.from();
  // 用正则判断路由名称是否以liste.或demand.开头
  const shouldRunHook = /^(liste|demand)\./.test(fromState.name);
  
  if (shouldRunHook) {
    // 执行你的过渡逻辑
    console.log('符合条件的路由切换，执行钩子');
  }
  
  // 返回true/false可以控制是否允许过渡，根据你的需求调整
  return true;
});

这种方式适合需要更复杂判断的场景，比如还要结合路由参数或者其他状态来决定是否触发钩子。

另外要提醒下，**是UI Router的通配符，会匹配该路由下的所有子路由，比如liste.**会匹配liste、liste.detail、liste.item.edit这些路由，刚好符合你的需求~

内容的提问来源于stack exchange，提问作者galiolio