UI-router 空参数导致导航到错误的路线答案

【问题标题】：UI-router empty param causes navigation to wrong routeUI-router 空参数导致导航到错误的路线
【发布时间】：2016-08-23 23:37:05
【问题描述】：

这应该很简单，但我就是想不通。

我有两条路线：

$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 按名称导航到“用户”状态，这可以正常工作，但是如果您在 URL 栏中键入 domain.com/users/ 它会进入编辑状态空的 userId 参数，即使在尾随 stash 之后没有任何内容。

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

这很容易解决吗？

【问题讨论】：

尝试将第一个 url 更改为 /users/（添加尾部斜杠）或将第二个 url 更改为 /users/{userId}。我怀疑其中一个会根据 URL 路径的 /users/ 部分混淆另一个。
第一个在没有斜杠的情况下停止 /users 工作，并在转到第二条路线时导致双斜杠，第二个使 url /users/users。为了清楚起见，如果 URL 是“/users”或“/users/”，我需要它转到父路由，但如果它是“/users/something”，那么它需要转到编辑页面。

标签： javascript angularjs angular-ui-router

【解决方案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

【讨论】：

谢谢 - 我认为 $urlMatcherFactoryProvider.strictMode(false) 成功了

【解决方案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'
    }}
});

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

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

【讨论】：

我明白我的想法，但我试图避免在网址中使用“/edit”以保持它们干净，例如/用户/迈克尔杰克逊