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

问题描述

我正在使用 UI-Router 并且需要另一个视图中的子视图.我需要在狗"视图中呈现所有者"视图.以下内容适用于该目的:

I am using UI-Router and need a subview in another view. I need to render the "owner" view within the "dog" view. The following works for that purpose:

UI-Router 配置如下

UI-Router config is as follows

.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/dogId.但是，我希望它是 /dogs/dogId，因为这更符合标准的 REST 原则.不幸的是，当我将 'dogAbstract' url 更改为 /dogs 时，它与dogsList"页面冲突，我只能拥有其中一个.

The problem is that the url structure is suboptimal. Currently to access a specific "dog" you have to go to /dog/dogId. However, I would like it to be /dogs/dogId because that goes better with standard REST principles. Unfortunately, when I change the 'dogAbstract' url to /dogs, it conflicts with the "dogsList" page, and I can only have one or the other.

有没有办法让它工作，以便我可以在 /dogs 获得列表并在 /dogs/dogId 中查看单个狗?

Is there a way to make it work so that I can have the list at /dogs and view an individual dog at /dogs/dogId?

推荐答案

有 一个工作 plunker

重点是改变定义的顺序:

The point is to change the order of definition:

越不具体的url在前，越详细

因为 UI-Router 使用状态声明的顺序来设置优先级.首先匹配 - 使用:

Because UI-Router uses the order of state declaration to set the priority. First which matches - is used:

// 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',
  ...
})

在操作中检查它这里

这篇关于抽象视图冲突的 UI-Router 路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！