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

I've got two routes in my app, nested into each other with ui-router:

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

app/locations/locations.js

'use strict';

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

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

This works fine flawless most of the time, but when I first on my list of locations, click on one, it gets displayed just fine, even the back button works, but when I then just type /locations into the URL bar (any other way without the back button), the router seems to try to open the "lower" route with controller and template but of course is missing the ID from the url then.

这在大多数情况下工作得很好,但是当我第一次在我的位置列表上,单击一个,它显示得很好,甚至后退按钮工作,但当我然后只需键入/位置到URL栏(任何其他没有后退按钮的方式),路由器似乎试图用控制器和模板打开“较低”的路线,但当然是从网址中遗漏了ID。

I have the feeling my understanding of the ui-router is a bit flawed, so can someone please explain to me, what I am doing wrong here.

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

1 个解决方案

#1

Perhaps you entered /locations/ into the URL instead of /locations. Entering /locations/ will trigger the second route, because the ui-router would expect that :id equals (empty).

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

Also look this FAQ if you want it to behave differently: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-make-a-trailing-slash-optional-for-all-routes

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

How can I have my routes be activated when the url contains either a trailing slash or not?

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

Set strictMode to false in your config block:

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

$urlMatcherFactoryProvider.strictMode(false)

#1