角度为ID的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'
      });
  });

在大多数情况下，这种方法都可以正常工作，但是当我第一次在位置列表中单击时，它就可以很好地显示，即使后退按钮也可以使用，但是当我然后在URL栏中键入/locations （任何其他方法）没有后退按钮的方式），路由器似乎尝试使用控制器和模板打开“下级”路由，但是当然会丢失网址中的ID。

我感觉我对ui路由器的理解有些缺陷，所以有人可以向我解释一下，我在这里做错了什么。

Answer 1

也许您在URL中输入了/locations/而不是/locations 。 输入/locations/将触发第二条路由，因为ui-router会期望:id等于(empty) 。

如果您希望它的行为不同，也请查看此FAQ： https : //github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-make-a-trailing-slash-optional-换全路由

网址中是否包含斜杠时如何激活我的路由？

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

$urlMatcherFactoryProvider.strictMode(false)