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路由器＆＃ 39; s ui-sref指令通过名称而不是我的应用程序中的URL来引用我的状态，并且尾部斜线看起来很丑陋。

我想要实现的目标是能够为主页/:filter提供可选参数，并且仍然可以使用我的其他路线/login，/register等。。无需通过添加尾部斜杠来解决它。

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

Answer 1

有a working example

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

// 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

Answer 2

最佳做法是说这可能是查询字符串参数而不是路由参数，因为您使用它来过滤掉数据。要使用ui-router执行此操作，只需将其定义为：

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

现在就做

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

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

2 个答案: