AngularJS UI路由器:由于可选参数而导致路由冲突

Question

我在AngularJS应用程序中有几条路线,我正在使用UI-Router在我的站点中的状态/页面之间进行路由.我遇到的一个问题是我有相互冲突的路由,因为我对网站主页有/可选参数.

我有一个主页(example.com)的路由或多或少定义如下:

$stateProvider
    .state('home', {
       url: '/:filter',
       params: {
           filter: { squash: true, value: null }
       }
    });

我可以通过转到主页(example.com),以及添加example.com/apples用于过滤主页上内容的可选参数来激活此状态.

我现在的问题是,我有一个定义的其他途径/login,/about,/help并通过进入example.com/login或example.com/help,只会激活home因为状态/:filter我已经定义了可选的占位符参数,它捕获后的任何途径/.

我尝试过的解决方法是在我的其他路由定义和链接中添加一个尾部斜杠url: /login/并激活:example.com/login/这有效但我无法使用UI路由器的ui-sref指令通过名称而不是我的应用程序中的URL来引用我的状态尾随斜线看起来很丑陋.

我试图做到的,是要能够对网页的可选参数/:filter,仍然能够去我的其他途径/login,/register等等.而不必通过添加结尾的斜杠要解决它.

之前有没有人处于这种或类似的情况？任何见解或建议都非常感谢.提前致谢.

Answer 1

有一个工作的例子

这里的重点是将家庭状态定义为最后一个:

// this url will be registered as first
.state('login', {
      url: "/login",
      templateUrl: 'tpl.html',
})
// this as second
.state('about', {
      url: "/about",
      templateUrl: 'tpl.html',
})
...
// this will be registered as the last
.state('home', {
      url: "/:filter",
      templateUrl: 'tpl.html',
      params: {
        filter: { squash: true, value: null }
      }
})

UI-Router按该顺序迭代已注册的状态,并尝试找出第一个匹配项.这样 - 所有其他状态(登录,关于)将优先于'home'状态...

检查它在这里