Javascript ui路由器——具有路由'；的URL与另一个具有$stateParams的状态共享同一级别？

我希望在我的应用程序中执行类似的操作，其中相同级别的URL会进入绝对命名的

baz

状态，或者进入带有参数的

biz

状态

angular.module('foo')
.config(function($stateProvider){
  $stateProvider
  .state('baz', {
    url: '/baz',
    templateUrl: '/templates/baz.html'
  })
  .state('biz', {
    url: '/:biz',
    templateUrl: '/templates/biz.html',
    resolve: {
      biz: function($stateParams){
        // resolve whatever $stateParams.biz should be
      }
    }
  })
})

然而，发生的事情是ui路由器总是点击

biz

状态，并将“baz”解释为该状态的参数。是否有一种优雅的方式让ui路由器知道任何点击“/baz”的东西都应该解析为

baz

状态

我知道我可以使用

$stateChangeStart

执行以下操作：

$rootScope.$on('$stateChangeStart', function(event, toState, toParams){
  if (toParams.biz === "baz"){
    event.preventDefault();
    $state.go('baz')
  }
})

但这远远不够优雅，看起来像是一个黑客行为。

我创建的，这实际上表明，上面的状态片段正在工作。为什么，因为这些状态的定义顺序正确：

.state('baz', {
    url: '/baz', // url '/baz' is registered first, will be find and used
    ...
})
.state('biz', {
    url: '/:biz', // '/baz' will never reach this, because is already handled
    ...

我们如何使其损坏的方法是切换状态def：

.state('biz', {
    url: '/:biz', // '/baz' will be handled by this state
    ...
.state('baz', {
    url: '/baz', // url '/baz' never reach this state def...
    ...
})

检查

总结：

状态定义顺序很重要使用第一个状态

url

匹配

---

这真的很奇怪。它肯定在你创建的plunker中起作用，但在我的应用程序中不起作用。谢谢你花时间研究这件事，我必须找出更多的情况，弄清楚到底发生了什么，弄清楚了。这是因为我试图达到的第一个状态是抽象的，它看起来像是角度服从于非抽象状态，不管顺序如何。太好了，你做到了！用户界面路由器：）