UI-抽象视图冲突的路由器路由

Question

我正在使用 UI-Router 并且需要另一个视图中的子视图。我需要在 "dog" 视图中渲染 "owner" 视图。为此目的，以下工作：

UI-路由器配置如下

.state('dogAbstract', {
    url: '/dog/:dogId',
    abstract: true,
    templateUrl: 'client/dogs/views/dog.ng.html',
    controller: 'dogCtrl',
})
.state('dog', {
    url: "",
    parent: "dogAbstract",
    views: {
        "owner": {
            templateUrl: 'client/owners/views/owner.ng.html',
            controller: 'ownerCtrl'
        }
    }
})
.state('dogsList', {
    url: '/dogs',
    templateUrl: 'client/moves/views/dogs-list.ng.html',
    controller: 'dogsListCtrl',
})

问题是 url 结构不是最理想的。目前要访问特定的 "dog"，您必须转到 /dog/dogId。但是，我希望它是 /dogs/dogId，因为这更符合标准 REST 原则。不幸的是，当我将'dogAbstract' url 更改为/dogs 时，它与"dogsList" 页面冲突，我只能有一个或另一个。

有没有办法让它工作，这样我就可以在 /dogs 获得列表并在 /dogs/dogId 查看单个狗？

Answer 1

有a working plunker

重点是改变定义顺序：

the less specific url first, the more detailed last

因为UI-路由器使用状态声明的顺序来设置优先级。首先匹配 - 使用：

// if /dogs is url, this will match
.state('dogsList', {
  url: '/dogs',
  ...
})

// if /dogs + something e.g. /dogs/1 - this ONLY will fit
.state('dogAbstract', {
  url: '/dogs/:dogId',
  ...
})

实际查看 here

UI-抽象视图冲突的路由器路由

UI-Router routes with abstract views conflicting

javascript

views

angularjs

angular-ui

angular-ui-router