javascript - AngularJS 用户界面路由器 : Route conflict because of optional parameter

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，由于 /:filter 可选，只会激活 home 状态我定义的占位符参数捕获 / 之后的任何路由。

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

我想要实现的是能够拥有主页的可选参数 /:filter 并且仍然能够进入我的其他路线 /login 、/register 等。而无需通过添加尾部斜杠来解决它。

有没有人遇到过这种或类似的情况？非常感谢任何见解或建议。提前致谢。

Answer 1

有a working example

这里的重点是定义home state为last:

// 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”状态...

查一下here