00:00
好,那我们接着呢,来继续分析我们的layout里面的这三个部分的内容,那我们前面说到了这layout里面呢,包含三个部分的内容,一个是side bar,一个是内bar,一个呢是APP,那很显然side bar呢就是左侧,内bar呢就是上侧,那APP们呢就是中间这个核心内容,所以呢,当我们点击数呀。啊,新增积分等级啊,积分等级列表的时候呀,这些组件呢,很明显是显示在了中间的这个。啊,APP们这个区域,也就是说核心内容这个区域的,那现在呢,我们就需要来看一看APP们里面它都有啊什么样的一些啊具体的程序,所以呢,我们来打开这个APP们啊APP们在哪呢?在这个components底下,对吧?啊所以我们打开这个component,然后呢,找到这个app.view。好,打开之后呢,你会发现这个里面是不是有一个嵌套的存啊,也就是说我们整个的APP view里面有一个路由出口,而APP view里面嵌套了这个layout layout里面呢有一个APP门,APP们里面也有一个路由出口,而这个APP们所在的位置呢,正好就是我们的主内容区域的这个位置,那么很显然这个里面的路由出口呢,就是子路由出口,那么子路由出口呢,它对应的就是子路由啊,那所以呢,我们在我们的路由文件里面,从这地方就可以看到这款children下面的就是子路由了。
01:45
那所以children下面的子路由,比如说tree这个路由,那么它完整的路由呢,是杠example,杠tree啊这个路由它所对应的组件呢,就是这个views gun tree garden就是tree,那我们再看一下昨天我们写的,今天我们写的呢,这个也是个子路游,子路游,比如说car integral grade,杠list这个路由所对应的子路由组件呢,就是我们昨天创建的这个list组件,这些子路由组件都会被直接的展示到我们的APP们的嵌套路由出口这个位置,那也就意味着当我们点击积分等级列表的时候,那个list会正好显示在这个APP门下面的嵌套路由出口下,而积分等级表单啊,它的这个路由的所对应的啊,这个组件呢,也正好会显示。
02:45
在APP main下面的啊,所对应的这个位置,所以我们来F12看一下。还没有啊。我们看整个我们的根组件是APP,然后跟组件呢,下面有layout。
03:02
Layout下面有sideb内B和APP,我们说所有的子路由出口都会在APP里面显示,所以呢,打开APP们发现这里真的就有一个form,这是我们昨天创建那个表单组件,而这个form是由哪个路由来调用的呢?是用这个。嗯,Car integralrate create这个路由来调用的对吧?哈,然后它具体是哪一个页面呢?它是我们的src路径下面的car integral轨杠create啊,就是它具体是哪个这个啊,这个路路由地址呢,是他是吧。好,然后接下来呢,我们再来看列表。列表这块呢,就是APP闷下来嵌的就是我们的这个list啊,这个路由,然后它具体的这个啊,路由的地址呢,就是它对吧?啊所以呢,这块呢,就是我们的一个子路由啊,它是如何整个嵌入到我们的layout里面的,而我们的layout又是如何展示在我们的页面当中的一个完整的流程啊,所以呢,那现在我们来看一下我们目前为止,比如说现在在这个积分等级列表下的话,那我们整个的页面,它的一个逻辑关系就是这样的了,先是APP,然后是layout layout下面呢是side bar bar和APPAPP下面呢是list,那如果用这个图。
04:30
嵌套的关系来表示的话呢,就是APP layout side bar live bar APP,然后下面呢,是这个list对吧?嗯,所以说这整个呢,就是我们项目当中的没有组件,以及组件和组件之间的关系,以及这个组件这个页面是如何一步一步的加载到我们的应用程序当中,从而显示出来的。
我来说两句