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

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' 
     }} 
    }); 

，如果你使用的用户界面，SREF这工作正常或$ state.go导航到名字的“用户”状态，但如果你输入domain.com/ users /放入URL栏中，即使在尾部藏匿处没有任何内容，它仍会使用空的userId参数进入编辑状态。

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

这是否容易修复？

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' 
    }} 
}); 

你的孩子状态url应该是'/ edit/{userId}'。当我们创建一个子状态时，它的url会自动添加它的父状态url。所以如果你的网址是'/ {userId}'，它将会是'domain.com/users/{userId}'。这就是为什么domain.com/users/将其导航到具有空参数值的状态users.edit。

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