AngularJS ui路由器:带参数和不带参数的URL

AngularJS ui-router: URL with params and without params

本文关键字：参数 URL ui AngularJS 路由器      更新时间：2023-09-26

我目前正在开发一个SPA，用于管理中的用户标识。我现在在angular ui路由器中为状态定义URL时遇到问题。

以下是我到目前为止发现的：

    .state('identity', {
        url: '/identity/:serialNumber',
        templateUrl: 'app/components/Identity/identity.html',
        controller: 'identityController'
    })
    .state('addidentity', {
        url: '/identity/add',
        templateUrl: 'app/components/Identity/identityAdd.html',
        controller: 'identityController'
    });

第一个状态（"identity"）通过URL参数"serialNumber"。这很好，我可以访问"identityController"中的参数。

我想用第二种状态（"addidentity"）实现的是，对于访问"/inidentity/add"的特殊情况，我想重定向到不同的模板（将来可能使用不同的控制器）。

然而，这是行不通的。只有第一种状态可以。第二个被忽略。据我所知，问题是即使我访问"/inidentity/add"，这个URL在技术上仍然符合第一种状态。在这种情况下，状态参数"serialNumber"将简单地设置为"add"。

我想我在理解ui路由器的工作原理时遇到了问题。ui路由器中有没有一种方法可以不同地处理这两个URL？

也许我思考这个问题的方式有根本的错误。如有任何帮助，我们将不胜感激：）

问候，

Timo

您可以使用正则表达式验证url：https://github.com/angular-ui/ui-router/wiki/URL-Routing#regex-参数

例如，如果您的序列号是一个整数，则以下内容将使url仅与整数匹配：

.state('identity', {
    url: '/identity/{serialNumber:[0-9]{1,8}}',
    templateUrl: 'app/components/Identity/identity.html',
    controller: 'identityController'
})
.state('addidentity', {
    url: '/identity/add',
    templateUrl: 'app/components/Identity/identityAdd.html',
    controller: 'identityController'
});
相关文章：