具有id的Angular UI-Router嵌套路由

Question

我的应用程序中有两条路由，用ui-router互相嵌套：

应用程序/位置/ locations.js

'use strict';

angular.module('treasuremapApp')
  .config(function ($stateProvider) {
    $stateProvider
      .state('locations', {
        url: '/locations',
        templateUrl: 'app/locations/locations.html',
        controller: 'LocationsCtrl'
      });
  });

和app / locations / location / location.js

'use strict';

angular.module('treasuremapApp')
  .config(function ($stateProvider) {
    $stateProvider
      .state('location', {
        url: '/locations/:id',
        templateUrl: 'app/locations/location/location.html',
        controller: 'LocationCtrl'
      });
  });

这在大多数情况下完美无瑕，但是当我第一次在我的位置列表上，点击一个，它显示得很好，甚至后退按钮都可以工作，但是当我输入/locations时URL栏（没有后退按钮的任何其他方式），路由器似乎尝试使用控制器和模板打开“较低”路线，但当然缺少网址中的ID。

我觉得我对ui-router的理解有点瑕疵，所以有人可以向我解释一下，我在这里做错了什么。

Answer 1

也许您已将/locations/输入到网址而不是/locations。输入/locations/将触发第二条路线，因为ui-router期望:id等于(empty)。

如果您希望它的行为不同，请查看此常见问题解答：https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-make-a-trailing-slash-optional-for-all-routes

  

当网址包含尾部斜杠时，如何激活我的路由？

     

在配置块中将strictMode设置为false：

     

$urlMatcherFactoryProvider.strictMode(false)