angularjs - ui-router 中嵌套状态的 URL 路由

Question

所以我使用 UI-Router 来构建我的 AngularJS 应用程序。然而，我对 URL 路由在嵌套状态下如何工作感到困惑，这主要是由于 UI-Router wiki 中提供的相互冲突的想法(根据我的理解)。

第一个想法

因此下面可能使用抽象状态

第二个想法

正如文档中给出的(第一个想法)，只有在父状态上定义了 'abstract':true 属性的情况下，父状态的 url 才会添加到其子状态的 url 之前。

但是文档(第二个想法)还提到了上述功能如何成为默认功能。

上面的两个想法对于同一个概念来说不是冲突的吗？还是我完全误解了他们？

Answer 1

嗯，文档陈述是正确的。也许对某人来说不清楚 - 但正确。它只是说:

1) 不继承 url: "..url..." 设置。这意味着，子状态不会将 url 设置为与父状态相同的值。两个值都是独立的。

2) 存在隐式 url 连接。子状态url(在地址栏中，而不是设置)是从其所有祖先url构建的。

因此，文档是正确的。这个example is just for玩……它显示了我们所知道的。子级的 url 设置 与父级不同。地址栏中的子状态 url 是根据其 url 设置 构建的 - 以父级 url 为前缀

// NON abstract
  .state('parent1', {
      abstract: false,
      url: "/parent1",
      templateUrl: 'tpl.html',
  })
  .state('parent1.child1', { 
      url: "/child1",
      templateUrl: 'tpl.html',
  })
// abstract
  .state('parent2', {
      abstract: true,
      url: "/parent2",
      templateUrl: 'tpl.html',
  })
  .state('parent2.child2', { 
      url: "/child2",
      templateUrl: 'tpl.html',
  })

href 中的网址:

non abstract
<a href="#/parent1">
<a href="#/parent1/child1">
abstract
<a href="#/parent2"> - cannot navigate there - is abstract
<a href="#/parent2/child2">