00:00
好了,各位说完了neyli和封装neyli呢,我也给大家写好了一个笔记,我们读一下啊,首先看第一个neli呢,可以实现路由链接的高亮,通过active class呢去指定这个样式的类名啊,第二个就是标签体内容呢,是一个特殊的标签属性,大家要知道啊,通过these star pro.children可以获取到标签体的内容,如果说的再仔细一点呢,应该叫做组建标签,标签体的内容对吧?我们就简称了标签体的内容。好,那回到案例当中,看到有一个警告说ne link呢,你定义了,但是却没有使用在APP啊这个组件的第二行,我们回到代码中,APP这个组件第二行确实啊,引入了你没用,因为你用的是my na link对吧?那所以说这儿的引入咱们不要了,保存回到页面刷新一下看效果,警告没了,切换呢也是可以实现的。好,那么回到代码当中固定的套路交手。
01:00
它停掉src呢,给大家复制一份CTRLCCTRLV右键重命名啊,这第几个呢,第十个了,下划线,嗯,Src,那这个主要讲的是navyli与封装navyli是吧?哎,好了,那navyli刚才讲的是吧?哎,那这就叫做封装,哎,Navy link好嘞,那咱继续啊,来回到咱们的效果当中,我重启一下脚手架啊n PM start好启动。稍等啊,等着打开浏览器之前呢,我就关掉了啊同学,控制台我就一直开着吧啊,万一有什么警告什么的,咱及时处理好吧,好了来现在的效果就是你不点啊,它肯定不展示,你点谁它就展示谁,对吗?好了,说一个问题,回到代码当中,找到你的APP来,这个呢,最小化同学啊,看起来挺正常的是吧,你点击about路径就改为杠about,你改杠about,前端路由器监测的到一匹配直接展示about对吧?那说这么一个问题,同学,假设我还有一个路由组件啊,叫做什么呢?Test,哎,随便写一个,让它里边呢也有点内容啊index.js叉RC。
02:24
改个名对吧,Test,那写一个H2啊,Test点点点好嘞,那关掉,那在上方呢,我引入这个路由组件,那import test from当前路径下的路由组件都在page里,Page下的test,好,那我问这么一个事儿啊,同学,我再来一份,这写成test,你说我这么写什么意思啊同学们。也就是说,如果你把路径变成了干about,我肯定是要给你看about组件,这没啥说的,但现在的问题就是说,如果我的路径变为了杠home,请问他把哪个组件给我看呢?同学,大家都知道这是进行了一次匹配,对不对?你什么路径我就给你看哪个组件,但是问题是如果听他的,那么给home组件是不是给咱看?那如果听这个的,那是不是把test组件给咱们看呀?同学,那你觉得是?
03:27
怎么个情况呢?是我后写的test,然后最终呢,就以test为主了,还是说你先注册的这个路由,那就先注册的为主。啊,还是说后注册为主,还是说无论你先注册的还是后注册的,你因为你说了嘛,杠home对应home,杠home还是对应test,那我就把两个组件都展示给你看,对吧。啊,那你说是哪种情况呢?啊,无非三种情况,以这个为主,以这个为主,还有一种可能就是都展示,那么在座的各位猜一下,你说他以哪个为主呢?我们试一下啊,来保存这段代码,回到页面看效果,同学,你就已经发现问题了,我是home组件的内容,这成功的展示了home,你看下方同学哪个组件也展示了呀,嗯,是不是test I OK,说老师这不挺好的吗?嗯,撤回重新写一下啊,大写的T老师这不挺好的吗?你看点击about就是about,你点击后面的时候,你看你配置的两个路由啊,它都生效了,同学,正常情况下一个路径肯定是对应一个组件的展示,对不对?哎,那你像你这种写的就不是一个正常的代码啊,是理论上也能实现是吧?我既展示这个又展示这个是吧,那如果你真想这样做的话,那为什么不把它两个变成一个组件呢,是吧,说老师我觉得这样也挺合理的,但是呢,我问你一个。
04:50
另外一个问题啊,同学你说他咋知道你37行?要展示T的组件呢?那就证明当你把路径输入为杠home的时候,它得一个一个匹配对不对?第一个不匹配,因为人家要的是杠杆BOT,你输入的是杠home算匹配吗?不算,那到这算匹配吗?算,那么按照刚才你所看到的结果来说,咱就以结果为导向啊同学,最终test展没展示,展示了,那就证明它在36行匹配上了杠home这个组件有没有继续向下匹配呢?有,所以说test的这个组件才得以展示,对吗?那大家想这么一个问题,你说如果我注册的路路由啊特别多呢,你就比如说我这儿还有一个叫做ABC啊,那就展示呢ABC这个组件,你再来一个,比如说这呢,我注册的是啊EFG啊,那这我就展示EFG这个组件,那同学我想问你,如果你注册的路由特别多呢,那你觉不觉得现在就存在一个效率上的问题?
05:54
是吧,你36行确实匹配上了杠,Home也展示了home这个组件,但是它会继续匹配的,你对不对啊,问这问这问这问这问了一圈都不是,然后终于问到这儿了,还说啊,还得展示T组件,那就展示了,那同学我想问你一下,如果我没有54行呢?嗯,那你觉不觉得就应该让他匹配上了一个路径之后,就不要再往下匹配了,再往下匹配觉不觉得就有点效率低了,是吧?而且我们说正常情况下肯定是一个路径对应一个组件的,那所以说我们怎么能让它,哎匹配上到36行之后,你就别往下看了,因为已经有一个人跟你匹配上了,你把这个组件展示出来看就可以了,啊不这么做呢,那肯定是效率低呗,对吧,你配置80个,那你下面还一点点问对吧,一个庞大的应用,可能路由是特别多的是吧,哎,那怎么办呢?同学说一个人啊,我先把这代码呢撤回来啊,这些东西呢,那。
06:54
都是我写的测试代码,ABC这个组件也没有是吧?我要这么写的肯定会报错的啊,我写这么多呢,只是给大家说演示一下问题,如果注册的路由特别多对吧?好,那闲言少叙,咱直接告诉大家怎么能提高一下效率,匹配上一个就不要再往下匹配了呢?我们引入一个人叫做Switch祖先啊,Switch对这个组件,然后呢,用Switch这个组件把所有你注册的路由包起来就可以了,如果你不包裹Switch,就是匹配上了之后还会继续往下匹配,但是如果您包裹了Switch,匹配上了,比如说37行已经匹配上了go home这个路径,它就不会再往下了,效率比较高,我们呢,一起试一下啊。来,回到案例当中,点击about,就是about,点击home呢,你看它只是home,对吧?其实刚才一上来大家就已经看到结果了,纵使你在下边再匹配。
07:55
他也不去展示了,但这样你要注意,如果说你把test写到这儿了,同学,那我想问一下就以谁为主了,Test后面就不展示了,所以说同学一般情况下我们不会让一个路径去对应,对应多个组件DOK,哎,这就是Switch的使用,非常简单,注册路由的时候拿Switch包一下就可以了,不是说什么时候都包啊同学,如果你的路由是一个以上,你再包啊,如果说你的注册的路由只有一个,那你包吗?同学,你不包呀,嗯,只有多个的时候包一下对不对?哎,我把test呢,给你放在下边好走啊,那这一小节呢,咱停一下,诶,这是一个小点,就是Switch的使用好。
我来说两句