AngularJS UI路由器：路由冲突，因为可选参数

我在AngularJS应用程序中有几条路线，我使用UI-Router在我的站点中的状态/页面之间进行路由。我遇到的一个问题是，由于我有/需要网站主页的可选参数，因此我的路线冲突。AngularJS UI路由器：路由冲突，因为可选参数

我有个路线用于主页（example.com）定义更多或更少的，像这样：

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

我可以通过进入主页（example.com）激活该状态下，以及通过添加可选参数example.com/apples我用它来过滤主页上的内容。现在

我的问题是，我已经等航线一样/login，，/help和去example.com/login或example.com/help定义，只会激活，因为我已经定义了/:filter可选占位符参数，它捕获以下/任何路线的home状态。

一种解决方法我都试过被添加斜线到我的其他路由定义和链接url: /login/并激活：example.com/login/其作品，但我将无法使用UI路由器的ui-sref指令通过名字来引用我的状态，而不是我的应用程序中的URL和尾部的斜线看起来很丑陋。

我想实现的是能够有可选参数的网页/:filter，仍然能够去我的其他途径/login，/register等。而不必通过添加结尾的斜杠要解决它。

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

来源

2015-09-04 Daniel Sandiego

有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-路由器迭代的顺序登记状态，并试图找出第一个匹配。通过这种方式 - 所有其他国家（登录，约）将有“家”的状态优先......

检查它here

来源

2015-09-04 16:03:27

啊，所以UI，路由器将通过它们被定义的顺序登记状态迭代。然而，我的路线是在模块中定义的，我的意思是我的角度应用程序被分解为模块，例如登录页面是模块，页面是模块等，并且它们的路线在每个模块内定义。然后通过应用程序模块将这些模块组合在一起。有没有办法做到这一点，而不必定义一个$ stateProvider或模块内的每条路线？ –

我会说 - 模块是不同的话题，在这里。它可能是很多模块，它可能只是一个。我使用几个模块，具有真正独特的URL前缀...所以最后并不重要。但就你而言，最重要的是**国家注册**的顺序。现在有办法。简单的UI路由器必须找到某种方式，如何决定优先级。并且按照设计顺序进行注册。希望它有一点帮助... –

是的，它确实有帮助！像很多，我的路由冲突已被解决，因为你的回答，特别是你的评论**国家注册**的顺序。非常感谢你，这是我的一天+试图解决这个问题。干杯! –

最佳实践会说，这也许应该是一个查询字符串参数，而不是一个路线因为您正在使用它来过滤数据。与UI路由器这样做只是定义它，像这样：

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

现在只是做

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

来源

2015-09-04 16:32:42

AngularJS UI路由器：路由冲突，因为可选参数

回答

相关问题