Question

这应该很简单，但我无法弄清楚。

我有两条路线：

$stateProvider

    .state('users', {
        url: '/users',
        views: {'@': {
            templateUrl: 'templates/users.tpl.html',
            controller: 'UsersCtrl as users'
        }}
    })
    .state('users.edit', {
        url: '/{userId}',
        views: {'@': {
            templateUrl: 'templates/editUser.tpl.html',
            controller: 'EditUserCtrl as editUser'
        }}
    });

如果您使用ui-sref或$ state.go导航到＆＃34;用户＆＃34;按名称状态，但是如果您在URL栏中键入domain.com/users/，它将进入具有空userId参数的编辑状态，即使在尾随存储后没有任何内容。

通常情况下这不会有问题，但是在没有userId的情况下触发editUser路由会导致控制台错误，这很难解决。

这很容易解决吗？

Answer 1

看一下这篇文章：

https://github.com/angular-ui/ui-router/issues/50

并在帖子中引用此链接：

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-make-a-trailing-slash-optional-for-all-routes

Answer 2

您的州定义应为

$ stateProvider

.state('users', {
    url: '/users',
    views: {'@': {
        templateUrl: 'templates/users.tpl.html',
        controller: 'UsersCtrl as users'
    }}
})
.state('users.edit', {
    url: '/edit/{userId}',
    views: {'@': {
        templateUrl: 'templates/editUser.tpl.html',
        controller: 'EditUserCtrl as editUser'
    }}
});

您的子状态网址应为＆＃39; / edit / {userId}＆＃39;。当我们创建子状态时，其url会自动添加其父状态url。因此，如果您的网址是＆＃39; / {userId}＆＃39;它将是＆＃39; domain.com/users/ {userId}＆＃39;。这就是为什么domain.com/users/导航到具有null参数值的州users.edit。

https://github.com/angular-ui/ui-router/wiki/nested-states-%26-nested-views

UI路由器空参数导致导航到错误的路由

2 个答案: