我的 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
等。而无需通过添加尾部斜杠来解决它。
有没有人遇到过这种或类似的情况?非常感谢任何见解或建议。提前致谢。
最佳答案
这里的重点是定义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
关于javascript - AngularJS 用户界面路由器 : Route conflict because of optional parameter,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32402169/