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

Question

我的 AngularJS 应用程序中有几条路线，我正在使用 UI-Router 在我的站点中 states/pages 之间进行路由。我遇到的一个问题是，由于站点主页的可选参数 I have/need，我的路由存在冲突。

我有一个主页路由（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

有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-路由器按该顺序迭代注册状态，并尝试找出第一个匹配项。这样 - 所有其他状态（登录，关于）将优先于 'home' 状态...

检查一下here

Answer 2

最佳做法是，这应该是查询字符串参数而不是路由参数，因为您要使用它来过滤数据。要使用 ui-router 做到这一点，只需像这样定义它：

$stateProvider
.state('home', {
   url: '/?filter'
});

现在就做

$state.go('home', {filter: 'apples'})

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

AngularJS UI Router: Route conflict because of optional parameter

javascript

state

angularjs

angular-ui-router