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

Nav*_*pal 6 state angularjs angular-ui-router

所以我使用UI-Router来构建我的AngularJS应用程序.但是我很困惑URL路由在嵌套状态的情况下如何工作主要是由于UI-Router的wiki中提供的冲突想法(根据我的理解).

第一个想法

想法1 因此,下面可能使用抽象状态

想法1

第二个想法

想法2

正如文档(第一个想法)中给出的那样,只有在'abstract'的情况下,父状态的url才会被添加到子状态的url:在父状态上定义的true属性.

然而,文档(第二个想法)也提到了上述是如何默认功能.

对于同一个概念,上述两个想法不是冲突的吗?还是我完全误解了他们?

Rad*_*ler 4

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

1)url: "..url..." 设置无继承。这意味着,子状态不会具有与父状态相同值的url集合。两个值都是独立的。

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

所以,文档是正确的。这个例子只是为了玩......它显示了我们所知道的。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',
  })
Run Code Online (Sandbox Code Playgroud)

href 中的网址:

non abstract
<a href="#/parent1">
<a href="#/parent1/child1">
abstract
<a href="#/parent2"> - cannot navigate there - is abstract
<a href="#/parent2/child2">
Run Code Online (Sandbox Code Playgroud)