00:00
好嘞,各位,那在这一小节呢,我们去写一个嵌套路由,什么叫嵌套路由呢?很简单,直接看效果啊各位,当你点击了后面这个导航项之后,诶,里边还能再点,点完了之后啊,还有内容,也就是说这儿呢,确实是一个导航区,右边呢对应它的展示区,但是在这个展示区里面还有一个新的导航区,以及一个新的展示区,觉不觉得东西开始产生嵌套了,哎,咱开玩笑的说,套娃从此开始了,这不就是嵌套路由吗?嵌套路由啊,还有另外一个名字,各位叫做多级路由,那这个多级是怎么体现的呢?看路径,各位,我目前是点了home,然后又点了message,那路径上的体现就是斜杠,然后再斜杠message,这不就是一个多级的感觉吗?来咱写写啊各位,静态页面呢,同样给大家准备好了,打开全家桶,找到零四静态页面,这回呀,我们就得用它了。
01:00
PAGE2啊,用文本编辑器呢,打开在这里边呢,给大家还是准备了两个页面啊,一个叫做home-messageage,一个叫做home-news,正好对应我们这里边的两个导航项,一个叫做news,一个叫做mesage,其实同学们也明白了啊,如果你一级路由你真的学懂了,其实这儿呢是分分钟的事儿,各位这是不是也是一个导航区,这是不是也是一个展示区,那我就得把这个导航项所对应的内容给它变成一个组件,组件叫什么呢?点呗,那同理,这边我就不说了啊,它肯定对应的是点对不?各位来回头看一下这个页面啊,先用浏览器呢,直接打开看一下效果啊,来点击message,点击news,就是这么一个切换的效果,当然现在我这是一假的,因为呢,我是靠多个页面进行切换的,对不对,哎,页面抖动啊,怎么地不好是吧,在这儿就不提了,那接下来同学怎么办啊,静态页面给你了分析呗。
02:00
从哪来找到哪儿,说老师从这儿到这儿,我全复制,同学,你这就错了,来回来,我们目前研究的是不是home这个组件里边的内容,也就是说同学这些东西,还有这些东西你用再写一遍吗?不用啊,这些东西你写过了,这个导航区呢,你写过了,我们研究的是home里边的内容,哎,所以说回到静态页面里面,你不要什么都看,各位home组件里的内容,你自己心知肚明,其实是在这儿呢,就是这个piel body里边的东西,对吧?各位来你看看这这导航来切一下画笔,诶,颜色调一下啊同学,来我问你,就这个导航项你写没写过,写过了吗?对吧?来,我调一下这个位置啊,把这个panel body呢完整的给你露出来啊,那这边呢,我也调整一下啊,往下滚动一下,给他俩呢,尽可能对的齐一点啊,然后呢,我把光标放在这儿,它就自动啊,把这个div呢,就给你圈起来了,就是这个啊,那我在这边呢,也。
03:00
把它放在这儿好了,同学,接下来我左右切换,你进行对比走。发现了什么呢?哎,同样的套路,同学active一会儿在这儿,一会儿在这儿是不?所以说这个其实就是我们的那个导航区,这回呢,他是拿u Li Li里边包着A标签写的,对不?啊,那然后你再往下看呗,走还有哪在变呢?哎,当然就是这个位置,大家已经发现了吧?哎,就是这儿一会儿展示这个div,哎一会儿呢,我又变成了一个l Li的列表是不?各位这会儿你别动啊,这个U一直都是导航啊,我把光标呢给你放在这儿来,我再切换走ul不变,是下边的div和ul在变是不是上边的这块不变,它是导航项了,那接下来你说怎么办吧,各位啊,把整个这个div是不都给它带走,因为整个这个div是home里边的内容,曾经你的home很简单,就这一句话,但是现在不是了,所以说把这一堆东西咋的复制走,随后呢,回到我们的代码里找谁去。
04:02
是不是得找home组件去,我要写它里边的内容了,对不对,哎,我先把这儿呢给大家注掉,防止它干扰我们,然后把这呢也给它注掉啊,防止干扰,好回到这个home组件里,把这一堆结构啊给它粘过来,缩进呢得调了是吧?嗯,走着,然后接下来怎么办?琢磨一下呗,不同的展示的内容是不是得变成不同的组件呢?哎,那回到这儿看,如果我选择的是news,那展示的就是一个u Li Li的新闻列表,如果点的是message,那整体来说是个div,里边再写u Li,然后每一项呢是一个A标签,然后写的是消息123是不,那来吧,别客气了,这一堆东西给它复制,然后回到这儿新建一个组件叫做message,然后固定的结构呢,写好名字呢,给它配置一下,然后把结构呢给它粘过来,缩进调一下,哎,完这样式呢,我们也不写,OK,把这一堆复制啊,再创建一个组件叫做news.view粘过来,名字改一下,然后结构呢给它带过来,这个结构就简单了,回到news里面,把这个ul啊给它带过来,同学,你得有这能力啊,从众多的结。
05:21
图当中筛选出来你要用的啊,这是一个基本功,OK,回到这儿,把这结构呢,给它替换一下,删掉,粘过来缩进一条,OK,各位两个组件,你说是不是准备好了,这两个都叫什么组件,路由组件,所以说你看同学我可自然了呢,直接把东西就写在这儿了啊那接下来这块各位怎么写呀,后面里边这块怎么写,写几个问号,问号代表啥意思呢?等着你去点的,你点的是谁,然后前端路由器监测到了匹配规则,再知道给这儿给你展示什么,就跟你当年写这个是一样的,About home OK,好了,那接下来干嘛呀,主要是改呗,这A标签啊,得改成RO link同学,我给你个建议啊,初学者你先把路由规则写好了,完了你再去写什么跳转,什么匹配那些东西啊,来把它关掉,去制定你的路由规则,找到路由配置项,各位,之前我只有两个对不对,一个是about,一个是谁呢?Home同学,注意,我跟你说一个名词,这两个东西啊,我们管它叫一级。
06:21
路由为啥叫一级路由呢?你看一上来就告诉你,哎,我要写这个路由规则了,那这是第一个规则,那这是第二个规则,第一个规则里面如果再写规则,你比如说我写一个粉色的,各位,那这个粉色的就叫做二级路由,这个红色的呢,就叫做一级路由,说的再直白点,各位,如果这个路由里边你不去继续配置路由了,那它就是默认的一个一级路由,OK,那我接下来要写的是home组件里边的事儿,各位你看我这个课件里边的演示是home下的message home下的这个news,所以说同学你得把规则呀,写在它的里面,你如果写在这儿,同学你要这么写啊,那你就毁了,你这么写啊,同学就差辈了,你把这东西放过来啊,说老师我写完了news下的什么,你这不对,各位得是人家里边的啊,那这呢,咱就不多说了啊,给它删掉,用一个全新的配置项,各位既然是属于这个路由的下一级路由或者说。
07:21
叫做他的子路游,那我就得这么写了,在这呢,来一个逗号,然后用一个特殊的配置项,叫做children children什么意思啊?哎,就是孩子们,然后它的值呢,是一个数组,请问为什么要写成数组?因为这个路由可能有N多个子路由,你说对吧,各位,哎,写第一套规则,第一套规则也得写什么呢?Pass路径呗,然后有些同学可能就想了,老师,我明白了啊,后下的news,那就是斜杠news,然后呢,我展示来走着把这东西拿过来缩进调一下,那就展示这个news组件呗,然后N大写不就得了吗?诶,老师,然后我在上边呢,引入呗,这是news,然后在这儿呢,这是news,这不就可以了吗?同学,这你就犯错了呀,犯哪个错误了呢?来,在这儿不要再加这杠了,哎说老师这怎么回事,一会儿加一会儿不加呢,同学听我说一级路由about home,我们都加着这个斜杠,如果说是某一个路由里的子路由I就。
08:21
那他的孩子你就别再加这个斜杠了,为啥呀?因为人家底层给你电立这一堆规则的时候,人家已经给你加上斜杠了,也就是说你写的是斜杠home,表面上好像直接写news了,其实人家在利的时候发现了children选项,就开始便利,Children这个数组就自动给你加上了写杠,拿着你的那个news单词就直接使用了,OK,你不要再加,你再加就画蛇添足了,就多了啊,那把这个呢,再给它复制一份啊,这小逗号别忘了,这同样也不加,因为他们两个不都是他的孩子吗?当然这名字你得换messagesage复制过来,然后M呢,大写把这个复制在这儿呢,再来一行,引入的是messageage,这是message OK,这不就搞定了吗?哎,感受一下同学套娃开始了是不是?其实你看看啊,无论是从这个页面呈现的效果,还是从这个路径,还是从这个路由的配置规则上,都方方面面的体现出了套娃的效果,是不,各位OK。
09:21
写完了,那接下来呢,太简单了,找到pages里的home组件啊,你别找这个同学,这就到头了,这就是一个组件,一会儿显示一会儿不显示,对不?现在你得找home啊,首先把这A标签啊,全都变成什么来着,Ror link,对吗?各位来调到这儿啊,把这目录呢先关掉,要不太长了,不便于我们观察,那这块呢,也得变成RO link走,然后这个active我不直接写死,我不给任何人加这个active啊,这多了一个空格,给它删掉,然后我利用一个属性,属性叫做active class,然后说active,对不,HRA都不能用了,都得改成to,然后直接在这呢,说你想把路径变成什么样?哎,有同学说老师好了,我就斜杠news,这不就得了吗?啊老师,我在这写一个斜杠message,这不就可以了吗?嗯,行,你先这么写着,其实你这么写不对啊,引导大家一下啊,先让你看看错误,然后再给大家写对的,那这块大家都知道了啊,直接写个RO是不是就可以了,这块呢,没什么文。
10:21
文章哎,就写这么一个东西,占个位就可以了,来我们看一下效果啊,各位回到这儿,嗯,找到我们写的这东西啊,然后呢,把这8080啊复制一份,我都给他关掉啊,我新开一个,各位来走着,嗯,这儿呢,咱之前提过了,你没写人家给你加上的,你看各位,我输入的就是8080,但是他给我加上了这个,回头咱再探讨啊,各位来点击about没问题,Home没问题,控制台打开啊,便于及时发现错误。接下来重点来了,我点击news,你注意观察一下路径怎么变啊,各位321走你路径啊,很给力,变成了你写的那个斜杠纽斯,但是在这啊,一个都不亮了,但是在这儿啊,一个都不展示了,请问为什么?
11:07
因为没有对应的规则,同学你琢磨琢磨,你刚才的那个路径是不是斜杠home,然后你是不是把路径变成了斜杠news,那你说是不是路径的一种改变,是的,那这个路径改变了,我问你前端路由器是不是监测到了,监测到之后怎么着拿着你这个斜杠news回到这个路由规则里面进行什么呢?哎,就在这儿呢,是不是进行匹配啊,那然后呢,人家是这么匹配的,你所写的是斜杠news,然后人就开始问了,说你是不是斜杠news,他说不是,他说那你呢,他说我也不是同学,对比完毕,没有任何能对得上的,所以说页面什么也不呈现,这就对了,是不?你还挺委屈的,你说你再往里看看呗,大哥,这里边还有呢,你看这不就是我的news吗?那谁让你的话没说明白呢?你得告诉人家是斜杠home先匹配上,进而人家再给你看里边的children,对不?各位,哎,所以说你明白了,我这得怎么写斜杠home也?
12:08
哎,就是说同学,如果你写的这个路由链接呀,是一个二级路由,或者说是一个子级路由,你就必须得带着他父亲的路径,就这么拖家带口的,你没招啊,在这儿就只能这么写着,我知道一会儿我会给大家讲这个其他的解决办法,就是不用把这个路径啊写的这么长,但是在这儿同学最基本的你也得会呀,是不?哎,带着斜杠home下的message这回就可以了,来瞧效果吧各位点击about,点击home,点击news点击OK对吧?各位,所以说大家觉不觉得一级路由你要懂了,这东西就相当于白送的,完了,你注意一下两个地方,一在这儿咋的别写那斜杠,二咋的跳转的时候带着他跌的路径是不是就行了?哎,演示另外一个错误啊,就是在这儿啊,你激动了,你还是写了这个斜杠,那最终的效果就是来你看一下啊,点击about,点击home,点击news路径的改变是没问题的,各位,因为你亲手写的嘛,你点了那个news路径就是斜杠home,斜杠news。
13:08
但是人家匹配的时候啊,就蒙圈了,哎,来往下看啊,人家匹配的时候呢,说哎呀是home,那我看看里面同学你多写了一个杠是不?人家已经给你补了一个杠了,你又写了一个,这肯定不对了,所以说同学啊,这是一个基本功,一定把它记住啊,这会儿不要再加那写杠了,OK啊,那这个多记录有啊,我们就写完了哦,那在这呢,把这src呢复制一份,再改个名呗,哎,叫做31_src叫做多级路由,多级路由也叫嵌套路由,OK,我在这儿呢就写多级路由了,课件上我给你写的是嵌套路由,来总结一波,Read me文档已经写好了,非常简单,配置规则的时候多写一个配置项,叫做children,它的值呢是一个数组,数组里面呢又是一组一组的配置规则,值得你注意的是,这儿不要写斜杠是吧,然后跳转的时候要写完整路径,哎,就刚才我说的,得带着他爹那个路径才可以是不?各位OK,那这小节呢,我们听。
我来说两句