00:00
好嘞,各位,那在这一小节呢,我们给大家说几个使用路由的注意点,先说第一个就是关于组件的分类,我做一个准备性的工作啊,把顶部的这个区域啊,也给它变成一个组件,名字呢叫做banner,诶因为banner这词呢,本身就有横幅标题的意思,回到代码里改一下,找到app.view然后找到那段结构啊,直接告诉大家是这段,给它剪切走,然后变成ner这个组件,那当然了,我得在这创建这个组件固定的结构呢,给它写好名字呢,给它配置一下,然后把结构呢粘过来,缩进一条样式,给这删掉,OK,然后回到APP里面,我们是不是得引入啊当前目录下的components下的banner,随后呢,还得注册复制他的名字。OK,回到页面呢,看一下效果刷新,跟刚才一模一样,只不过这儿呢多了一个组件是吧?各位回到代码里观察一下你的components文件夹里面有几个组件,有三个,然后我告诉大家,他和哎,About和home它俩是一类组件,我们管它俩呢叫做路由组件,然后还有一个就是这个banner,我们管这个呀,叫做一般组件,说老师我怎么区分呢?什么叫一般组件,什么叫路由组件呢?看使用方式,同学,我的banner是怎么用的啊,首先你得引入,然后你得注册,最主要的啊,同学,你是亲自写的banner这个组件标签对吗?那回想一下我的about和我的home是怎么用的呀?哎,回顾一下,我点了about,这之所以能呈现about这个内容,就证明about这个组件肯定被用了,那怎么被用的呢?你点击了路由链接,修改了路径,前端路由器。
01:55
监测到了匹配规则的时候,发现这个路径得对应这个组件,于是乎呢,就把about这个组件渲染出来,给你放在指定的位置,全程整个过程当中,我从来没有写过这段代码,没有写过about这个组件标签,同样的我也没有写过home这个组件标签,你说对吗?各位,哎,你像about和home这种靠路由规则匹配出来,由路由器给你渲染的组件,我们就叫做路由组件,哎,如果你自己亲自写标签的这个banner,那就是一般组件开发当中啊,我们一般为了明确区分这两个组件啊,会把它们放在不同的文件夹里面啊,说老师不就一个吗?Components现在开始变成两个了,各位,有这么一个文件夹叫做pages,这里边呢一般放路由组件,然后我们之前所说的这个components啊,往往我们放置一般组件,这样的话呢,更便于管理这些组件啊,那接下来我们去做一下新建一个。
02:55
Pages同学,配置是不是本身就有页面的意思,那pages呢,就是一堆页面呗,哎,所以说各位你感受一下啊,你说路由组件从某种程度上来说,是不是也算一个微型的页面对吧?你看你打开这个about,你看这个组件各位也有结构吧啊,有一些数据和交互也有样式吧?啊是不是也可以理解为一个微型的小页面呢?说老师你这么说呢,一般组件还算呢,哎,但是同学路由组件不是得靠切换,然后展示不同的页面嘛,就有种感觉好像是页面其实不是一个完整的页面,好了,在这儿不墨迹了,About和home摁住给它放在这儿是不是就可以了?哎,Pages里面放路由组件这里放一般的,然后在这儿呢,你还得调整各位来到这个路由配置里面,这块不应该是components了,Pages,那这呢也是OK,回到这儿呢,刷新一波,嗯,跟刚才是一样的啊,这样的话呢,分类更明确,好接下来我们说第二个注意点,说说什么呢?来看这儿各位,你说目前我显示的是什么组件,Home组件。
03:55
哎,那我点这个呢,那就about组件呢?那我想问的是这home组件它上哪里去了?说老师爱上哪儿上哪儿去,反正没出现在我的面前,是的,没出现在你的面前,但我想问的是这个组件是到底把它销毁了不见了呀?还是说其实他还在,只是display none隐藏了?哎,我们要说一下这个事儿,直接告诉大家答案啊,就是不用的路由组件,或者说当你切换切走了的路由组件其实是被销毁了。诶那怎么证明呢?回到这很简单,各位回到这个pages里面找到about,我加一个生命周期钩子就可以了,Before try,大家还记得这个吧,就是所有的组件在即将销毁之前都会掉这钩子啊,那我在这儿呢,简单的进行一个consolo,哎,我就这么说,叫做about组件即将被不是卸载啊,叫做销毁了,React里面叫卸载好,那把这个呢给它复制过来给。
04:55
一份呢,Home,诶英文的逗号走这块换个词home,然后呢,我再写一个叫做mounted,啥意思,就是挂载完毕啊,那这儿呢,再给他来一个conslo,哎,叫做home组件。
05:11
挂载完毕了,这句话呢,复制,哎,再给他一份走,换个词儿呗,About组建好,咱看一下效果啊各位回到这儿,我打开控制台,先把整个这些啊都删掉,同学我一个导航项都不点,那就意味着我一个都不想看,所以说你发现控制台上同学about组件没有挂载,Home组件也没有挂载,那接下来你看好了,我点击about组件啊,先点第一个走。同学你看你点谁谁就展示,那怎么展示啊,得挂载这个组件才能展示,诶接下来你注意了,当我切走的时候,你注意看走先是about组件即将被销毁,随后再是home组件挂载完毕,那你说等我再点这个的时候呢,看效果走,那就是home组件即将被销毁,然后about组件挂载完毕,也就是说你在这切换的时候,其实路由组件是频繁的被销毁挂载,销毁挂载的,诶这是第二个注意点,再说第三个注意点,各位就是about组件还有home组件他们的身上啊,其实都多了两个人来,我给你输出一下啊,先把这些东西呢给它注掉,防止一会儿呢干扰大家,再把这个home也给它注掉,然后呢,我这么写啊,在这个home组件的mount的里面啊,我给你输出什么的,那个this啊,那这样吧,在这呢我就不了行不啊,我只这个before this来把这个掉,挂载完毕就输出this啊。
06:43
This,不是那VC吗?那在这呢,同理挪一下位置,哎,在这儿呢,输出Z来看一下效果啊各位回到这边清空,然后呢,我点击后部走home是不是挂载了啊,你打开它,各位啊,我现在打开的是home组件的实例对象VC走身上出现两个新的东西没在这儿,在下边呢,往下看,诶就是这东西,一个是Dollar f RO,一个是Dollar福RO,说一下这俩东西都是什么?各位你说home组件是不是参与了那个路由的配置啊?
07:16
说老师什么叫参与路由的配置,那你看一下呗,在你路由的配置里面,你是不是写了home呀?好,那你说既然你写了一个跟home组件相关的配置,那这是一个路由规则吧,诶好,各位,你这身上所看到的这个东西就是它的路由规则,你打开同学里边有你所配置的东西,你看这儿同学这里边的东西有很多啊各位,我们先关注一下我们所配置的同学有没有这个pass,有吧,还说老师呢,这些东西呢,这都哪来的呀?是人家给你加的,说老师他闲得慌,加这东西干嘛呀,都有用啊,一会儿我们再说,好,那再说说这个是谁啊,Roer同学,这roer啊,就是整个应用的路由器,这RO只有一个,就整个应用只有一个路由器,哪怕你写了800个路由规则,最终也得交给一个路由器去保管。
08:07
哎,那你点开about,各位是不是又输出他的VC了呀?你看他的身上也有Dollar for,也有Dollar for这个东西,同学是每个组件啊,自己都有,但是里边的信息是不一样的,你比如说about组件,你看里边的pass,当然就是about,也就是说about和home身上都有Dollar road这个属性,但是值是不一样的啊,完全是两套东西,但是他们身上的Dollar for RO是一个,因为整个应用呢,只有一个路由器,说老师你这怎么验证啊,很简单,各位回来啊,给你叫一下这帧回到about组件里面,哎,我做这么一件事儿啊,这个组件只要一挂载啊,我做两件事儿,window.about的root等于this.dollar符wrote啥意思?这组件一挂载,我就把这个组件所对应的路由配置信息放在window的about road上,然后同理,我再做另外一件事儿,就是把它身上的这个路由器。
09:07
放在window身上的about roer,哎,是多了一个R的,哎,大家注意观察一下,这儿我就是想验证一下,每一个组件身上虽然都有Dollar for RO这个属性,但是自己里边的内容是自己的啊,不是完全一致的。换句话说,同学,A身上有一个X属性,B身上也有一个,但是此X非比X是俩东西啊,但如果说A身上有一个这个东西ror,完了,B身上啊也有一个ror,那这两个其实是一个,我就是想验证这个事儿啊,那把这一堆东西呢,给它复制一份儿,然后回到这个home里面,在这呢给它粘贴,这呢改一下是home,然后在这儿呢,当然也得改啊,Home的route啊,这呢是home的route OK,来,回到页面里面啊,都给它删掉看,最基本的控制台呢,也清掉,我让它挂载一次,我再让它挂载一次,那这个时候各位window身上应该有了四个属性。首先验。
10:07
正第一件事就是他们身上的那个Dollar RO是不是一个肯定不是来验证各位about route是否真的等于home的RO,是first,每个人的配置信息是不一样的啊,是自己独有的,哎,然后再说这个就是about的RO是否等于这个home的roer,在这同学你看是true,因为无论是他身上的Dollar floater,还是他身上呢,其实都是一个Dollar floater OK,哎,要跟大家说的呢,就这么几件事,可能有一些同学说啊,说老师那有这有啥用啊,你这Dollar RO Dollar RO,这有什么用呢?说老师我拿到这个了啊,那咋了呢?是吧,现在没用,以后传参的时候会有用呢。还有同学说,老师这路由器为啥给我呢?路由器让它停在这儿呗,就在这儿老老实实的待着呗,为啥还要给我维护一个属性,让我拿到路由器呢?老师,我想看看路由器里面有什么,那你看看吧,路由器里面有很多使用的方法,现在没用,以后会有用的。OK,来给。
11:07
大家整理好了,看一下这个remi文档。划到最后几个注意点啊,首先第一个路由组件通常存放在pages文件夹,一般组件通常放在components文件夹,哎,然后通过通过切换。通过切换隐藏了的路由组件默认是被销毁的,后期呢,我们也有办法让它不销毁啊,到时候再说,需要的时候呢,再去挂载。第三句话,每个组件都有自己的Dollar for RO属性,里面存储着自己的路由信息啊,注意是自己的,然后整个应用只有一个roer,可以通过组件的Dollar for RO属性获取到,OK,那这小节呢,我们停。
我来说两句