AngularJS UI路由器：因为可选参数的路线冲突 [英] AngularJS UI Router: Route conflict because of optional parameter

问题描述

我有一对夫妇在我的AngularJS应用程序的路线，我使用的UI路由器在我的网站州/页之间的路由。我有一个问题是，我有冲突的途径，因为一个可选的参数我有/需要在网站的首页。

I have a couple of routes in my AngularJS app, I'm using UI-Router for routing between states/pages in my site. An issue I am having is that I have conflicting routes because of a optional parameter I have/need for the homepage of the site.

我有（ example.com ）中定义或多或少像这样主页的路线：

I have a route for the homepage(example.com) defined more or less like so:

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

我可以进入主​​页（ example.com ），以及通过增加可选参数 example.com/激活此状态苹果，我用它来过滤掉主页上的内容。

I can activate this state by going to the homepage(example.com), as well as by adding the optional parameter example.com/apples which I use to filter out the contents on the homepage.

我现在的问题是，我有一个像 /登录， /约，<$ C $规定的其他途径C> /帮助并转到 example.com/login 或 example.com/help ，只会激活，因为 /的首页状态：我已经定义过滤器可选占位符参数，它捕获所有继航 / 。

My problem now is that I have other routes defined like /login, /about, /help and by going to example.com/login or example.com/help, will only activate the home state because of the /:filter optional placeholder parameter I have defined which catches any route following /.

一个解决方法我都试过被添加尾随斜线我的其他路由定义​​和链接网​​址：/登录/ 并启动：的例子。 COM /登录/ 这工作，但我不能使用的用户界面路由器的 UI-SREF 指令的名字，而不是指我的状态URL我的应用程序内部和斜线只是看起来丑陋。

A workaround I have tried is adding a trailing slash to my other route definitions and links url: /login/ and to activate: example.com/login/ which works but I won't be able to use UI router's ui-sref directive to refer to my states by name instead of URL inside my app and the trailing slash just looks plain ugly.

我所试图实现的是要能够对网页可选参数/：过滤器，仍然能够去我的其他路线 /登录， /寄存器等。而不必通过添加结尾的斜杠要解决它。

What I am trying to achieve is to be able to have the optional parameter for the homepage /:filter and still be able to go the my other routes /login, /register, etc.. without having to workaround it by adding trailing slashes.

有没有人在这个或类似的情况之前？任何见解或建议是非常AP preciated。先谢谢了。

Has anyone been in this or similar situation before? Any insight or suggestion is very much appreciated. Thanks in advance.

推荐答案

有一个工作示例

这里的关键是确定的家乡作为最后的：

The point here is to define home state as the 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-路由器迭代的顺序注册状态，并试图找出第一个匹配。这种方式 - 所有其他国家（登录，约）将有precedence'家'的状态......

UI-Router iterates the registered states in that order, and tries to find out first match. This way - all other states (login, about) will have precedence of 'home' state...

检查一下这里

这篇关于AngularJS UI路由器：因为可选参数的路线冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！