00:00
那刚才我们讲的呢，是一个最简单的一个组件，还有呃，路由地址，还有路由出口对吧？Root view它们之间是怎么样合作的啊好，我们再来看一下这面呢有pass pass呢对应组件，也就是说路由对应组件，组件显示在路由出口这个位置，对吧？好，接下来我们来看一下稍微复杂一点的路由。就是这个，比如说这单是报。这个单是报着呢。他pass是跟，然后呢，它会redirect到单board，也就是说它会跳转到这个单啊，然后呢，这个单是报的呢，会引入。这个dashboard的这个index这个内容，那我们来看一看啊，我们访问pass的时候是不是会redirect到daboard redirect到daboard之后，它的component会不会是显示这块的内容哈，我们在这个地方呢，就写一个跟根哈来。
01:08
进来之后呢，确实是跳转到了单报的，而是ball的这个路由所引的组件是什么，是不是DA是ball的index呀，好，我们找一下views，然后DA是board的，然后index是它吧，嗯，我们点进去，点进去之后发现这个里面的内容是不是确实就是名字叫什么。角色，然后有一个便利对吧，有可能好几个角色好，那就两部分内容，名字和角色。是不是就是他name和Rose呀，对吧，那这个时候有的同学可能会发现一个问题，什么问题呢？就是我们嵌入的这个组件里面就两个div，而这两个div呢，就是它和它就说明dashboard展示了这个页，那问题来了，这些东西哪来的？
02:03
这东西和这东西是哪来的？对不对，我们刚才看到的那个页面里面只有他呀，啊上面和左面。它是在哪定义的呢？注意是在layout里定义的，哪个layout呢，注意。这个地方，我们的这个pass，它实际上对应的这个页面组件并不是它，而是谁，而是它。这不有一个component吗？这个component呢，它叫布局组件，好，这个布局组件在哪。这个布局组件呢，在这儿。啊，这个layout是从哪引进来的，这个layout呢，是从这个地方引进来的，叫做。圈杠layout，这个圈杠layout是什么？就是src下面的layout呀，好，Src是不是在这个地方啊，下面是不是有一个layout，好，Layout里面的这个index点啊，那它这面就是如果是index的话，它是可以省略的哈，好，那么就是S2C下面的这个layout下面的这个inex加view，这个其实就是我们的这个布局组件，明白吧？啊，所以呢，这个组件其实是我们真正的这个pass，它所。
03:32
这个呃，连接的一个组件，然后接下来呢，我们来看一下这个布局组件里面定义了什么，在这啊。好，大家看布局组件里面呢，有几个核心的内容，这个叫侧边栏。较塞的吧。然后这个其他的都是，呃，你你可以把它理解为就是展示它左中右架构用的啊，比如说这个你看它在左边展示对吧，这在上面展示，为了方便定义样式和位置的啊，进行div，我们看核心这个叫做。
04:17
导航。来导航栏，好，这个叫做主内容区。啊，这三个部分的内容大家了解了吧，这个叫侧边栏，这个叫导航栏。这个叫主内容区啊，哪来的side bar，哪来的side bar在这儿import进来的啊，所以呢，它实际上是在这定义出来的啊，Component叫组件嘛，啊叫注册组件，注册的这个组件哪来的，实际上他应该是这样子。
05:11
那个大啊。然后这款呢，是塞的吧。然后这款呢，是AP，那它实际上应该是这样写的啊，只不过简写就变成刚才那个样子了，那么这三个变量是哪来的，这不是在这import进来的模块吗？把这个na bar side和appmen，是不是把这三个模块从component这个目录下引进来，Component在哪？在这呢？对吧，当前的这个index view index在这啊，当前的这个index view所在的目录下面的component这个目录下面是不是有塞吧？内吧，啊这塞吧，下面的。啊，三八下面应该有一个index view对吧？啊，SIDE8下面的index view实际上就表示的就是这个side吧，啊然后APP man是就是它啊，然后na bar是不是就是它啊，所以呢，把这三个模块从components下面呢引到这来。
06:17
啊，这个叫引入组件，好，这个呢叫注册组件，把这个子组件这个注册到这个变量当中，把这个子组件注册到这个变量当中，把这个子组件注册到这变量当中，正好一样可以把它省略掉，好然后接下来呢，子组件注册完了之后，就要在页面中调用。所以这面呢，就叫调用子组件，调用的方式呢，它有两种啊，就是你看子组件叫什么叫内，那么这块我调用的时候呢，我就可以写内范。
07:03
这样写也可以明白这意思吧，啊，这样写也可以啊，好，但是呢，也可以把什么呀，手写的大写字母换成小写字母，这种语法格式在当前的这个项目当中也支持，所以你这样写也行，按它的这个这样写也行，好，然后另外呢，你像这个塞的吧。变成小写是不是就是它呀啊然另外呢，你像这个APP men，注意啊，APP men如果变成小写的话，它是这样的，因为这个APP main里面呢啊，它首字母变成小写，而中间这块呢，也有一个驼峰式的大写字母，那在这个前面呢，我们要变成小写形式，该加它啊，所以呢，这个APP这个组件呢，引入到我们的页面当中的时候呢，你可以用这种形式引入，你也可以用这种形式引入，它俩都成立啊，那所以我们看到的这个APP们。就是它了啊，我们看到的那幅吧。
08:02
就是它了，我们看到的stand by就是它了，明白吧，啊，它们呢，以这种形式呢，展示到我们的inex，也就是展示在哪，展示在layout对吧，Layout的index view展示在这个里面三个部分的内容啊，而layout展示在哪，Layout是不是根据我们这个定义，它直接展示在我们的跟组键，也就是展示在这个位置呀，所以它们之间的关系是什么？APP view下面欠什么呀，欠。Layout layout下面签什么？Layout下面签吧name吧和们我们看一下。F12啊，看这个六。看这面是不是APP下面签layout啊，Layout下面签什么side bar live吧，APP man是这意思吧，你看我把鼠标放在不同位置的时候，是不是页面上不同的位置就高亮了，你看赛德曼左侧高亮，内上方高亮。
09:12
APP主内容去高量是这意思吧？啊，所以我们来看我们的inex JS啊，还是看这个路由，除了我们的主页面用了这个layout之外，我其他的页面用没用，是不是也用了，比如说EGR read，昨天我们写的积分等级管理是不是也用了layout，那么我们来看分等级。积分等级列表。积分等级列表里面的这个嵌套关系是不是也是APP？Lay out，塞吧。Bar和APP们呀，对吧，啊，你无论哪个例子，比如说我这个。啊，例子当中的数吧。这棵树啊，好，这棵树。树那个例子在哪？例子当中的树哈，找下面例子。
10:01
例子当中的数对吧？啊好，这个整个的路由是不是也是首先先基于这个layout的呀，好，那么所以这个地方啊，是不是也是APP layout吧name吧，APP may啊所以这个layout就是布局。啊，你的这个页面只要想显示在这种啊左上，然后主内容区这样的一个布局下的时候，那么你在这个地方就加上layout就行了啊，那所有的这些内容它会嵌到哪呢？它会嵌到这个地方啊，注意会嵌到我们的layout里面的主内容区域里面，所以接下来我们来分析一下它是怎么就嵌到主内容区域里面去的。
我来说两句