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

发布时间：2020-12-17 07:00:14 所属栏目：安全来源：网络整理

导读：所以我使用UI-Router来构建我的AngularJS应用程序.但是我很困惑URL路由在嵌套状态的情况下如何工作主要是由于UI-Router的wiki中提供的冲突想法(根据我的理解). 第一个想法因此,下面可能使用抽象状态第二个想法正如文档(第一个想法)中给出的那样,只有在’a

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

第一个想法

idea 1

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

idea 1

第二个想法

idea 2

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

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

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

解决方法

那么,文档声明是正确的.也许对某人不清楚 – 但是正确的.它简单地说：

1)没有url的继承：“..url …”设置.这意味着,子状态不会将url设置为与父级相同的值.两个值都是独立的.

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

所以,文档是正确的.这场example is just for比赛……它展示了我们所知道的.孩子有不同的网址设置然后父母.地址栏中的子状态URL是从其URL设置构建的 – 以父(ur)url为前缀

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

url in href：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!