ui-view的使用总结

在平常的编码过程中一直没搞明白ui-view的使用，一直是到了路由跳转的时候，显示不出来了就加上一个，ui-view或者有的时候加上了之后又不对了就有去掉，为此专门查了一下ui-view到底如何使用。

这里主要介绍关于，ui-view的简单嵌套使用，关于ui-view的一些复杂的使用还没有学到，等到学到之后在进行补充。

在这里我们使用例子进行简单的说明，这个例子参考的是官网上的例子

这是我们例子中的路由，共有三个，依次向上嵌套。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var states = [
  {
    name: 'folderlist',
    component: FolderListComponent
  },
  {
    name: 'folderlist.messagelist',
    component: MessageListComponent
  },
  {
    name: 'folderlist.messagelist.message',
    component: MessageContentComponent
  }
];

如下是我们触发了我们的一级路由，加载出的界面的代码如下,注意看代码中有该模块的嵌套路由，这是他的子路由并未激活，所以是空的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<FolderListComponent>
  <ul class="left">
    <li>INBOX</li>
    <li>SPAM</li>
    <li>DELETED</li>
    <li>SENT</li>
  </ul>

  <div class="right">
    <uiview>
      <MessageListComponent class="top">
        <ul>
          <li>Message 1</li>
          <li>Message 2</li>
          <li>Message 3</li>
        </ul>

        <div class="bottom">
          <uiview></uiview>
        </div>
      </MessageListComponent>
    </uiview>
  </div>
</FolderListComponent>

如下当我们激活了他的子路由的时候MessageListComponent的信息加载进来，生成的代码如下，FolderListComponent的嵌套ui-view已经加载完毕,可以看出我们还嵌套着三级路由，未激活的状态下内容为空。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<FolderListComponent>
  <ul class="left">
    <li>INBOX</li>
    <li>SPAM</li>
    <li>DELETED</li>
    <li>SENT</li>
  </ul>

  <div class="right">
    <uiview>
      <MessageListComponent class="top">
        <ul>
          <li>Message 1</li>
          <li>Message 2</li>
          <li>Message 3</li>
        </ul>

        <div class="bottom">
          <uiview></uiview>
        </div>
      </MessageListComponent>
    </uiview>
  </div>
</FolderListComponent>

下面我们来激活三级路由，MessageContentComponent的内容就加载进来了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<FolderListComponent>
  <ul class="left">
    <li>INBOX</li>
    <li>SPAM</li>
    <li>DELETED</li>
    <li>SENT</li>
  </ul>

  <div class="right">
    <uiview>
      <MessageListComponent class="top">
        <ul>
          <li>Message 1</li>
          <li>Message 2</li>
          <li>Message 3</li>
        </ul>

        <div class="bottom">
          <uiview>
            <MessageContentComponent>
              <p>Date: 2017-08-01</p>
              <p>Sender: GlobalCorp Bank</p>
              <p>Subject: Need a loan?</p>
              <div class="body">
                <p>Hey you! We have the best loans.</p>
                <p>You should really get a loan.</p>
                <p>Loans are awesome.</p>
              </div>
            </MessageContentComponent>
          </uiview>
        </div>
      </MessageListComponent>
    </uiview>
  </div>
</FolderListComponent>

所以当我们在简单的使用ui-view的嵌套时，我们会发现，我们的每一层的嵌套关系都会加上一个ui-view,然后当我们激活他的嵌套的子级路由时，ui-view里的内容就会被激活。

参考文档

推荐文章