角度為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)