00:00
咱们继续这一小节呢,我们来说一下这个嵌套路由,有同学可能说啊,说老师这笔记啊,你一会儿看,你一会儿不看的,是这样啊,同学们咱从这小节开始啊,咱先放开这笔记,咱就正常写功能,因为本身东西不多,也不难啊,边写我边告诉你五跟六有什么改变,有什么区别,你等把这个案例全都写完了,我们从笔记的这个第一行一直到最后一行,咱全都过一遍,梳理一遍,好吧,来,那嵌套路由的效果大家应该也不陌生吧,咱之前做果就是home里边还有子路由,来打开先看一下效果啊,就是home里边有news和message,走走走,哎,就这意思,那接下来第一步你说得怎么着,是不是去找这个静态页面,先把home组件里的内容是不是得先拿回来呀?那这div我就收起来了,也就是从二十五行一直到这50行,都是谁里的内容呢?Home组件,CTRLC回到这儿,找到home组件。
01:00
不再这么简单了,删掉,粘过来右键选择一下格式化,没完啊,Class得改成class name对吧,全都替换,OK,好,接下来再分析home里边已经变成了这种样子了,那那这个是不是得意味着不同的展示区还得变成不同的组件呀,所以说不再赘述了,在这直接news.js叉,再来messageage.gs叉,快速的RFC这一堆,那来到这RFC这一堆,好,那接下来就是回到静态页面里边找呗,哪块是news的,哪块是message的,打开。Home组件里边啊,东西也不少,这个ul是home里边的导航区,然后下边这个div所呈现的红色区域是它的展示区,对吧?那你拿这个ul也行,你拿外边那div也可以,那我就从这儿到这儿,我把这message整个都带走,回到我这里边,把message这块替换一下,删掉过来,好格式化一下,这里边没有class,我就不再更改了,回到这儿再找谁呢?News,往下找news就简单了,就是这么一个ul来给它复制。
02:19
回到这儿,找到我的news,然后把这一堆给它粘过来,右键格式化一下好了。Home写完了,不同的展示区也变成了不同的路由,回到home里边这一堆,你是不是就得删掉了?对吧,一个H4写几个问号什么意思呀,就是以后肯定得根据路径呈现路由组件,但是到底是什么路由组件我不知道,那目前就是这个样子,当然这块你也得给它删掉啊,点谁谁亮嘛,所以说active再见。那接下来呢,你得去定规则了啊,这跟之前的写法就有点儿不太一样了,因为什么呢?我们刚才是不是用了这个东西叫做路由表啊,说老师路由表必须要用吗?也不见得必须要用,但是一般来说你做大型项目开发,肯定得集中一下管理这个路由,那接下来就是在这个里边呢去写东西了,首先你得引入你新定义的那两个路由组件,一个叫做message。
03:20
然后还有一个呢,叫做news,这直接改啊news,那这会叫做news,然后注意了,由于你的news和message是home的子组件,那需要在这里边形成一个嵌套的结构逗号,写一个叫做children。哎,如果同学啊,你要是学过view的同学,目前看这块你就会觉得,诶,老师,这不就是view里的那个什么什么什么对吧?它里边不也有一个children吗?好,Children值也是一个数组,为啥呀?一个路由可能有N个子路由,那每一个路由的配置又是相同的套路,还得写谁pass?哎,值得你注意的是这块呢,就比原来省心了,原来啊,你不用路由表,你得带着你所有的负极路由的路径,对不对?比方说你想写一个C路由,那你就得写后面家的A,家的B家的C,对吧?这回简单了,直接删掉,就写你子集路径的名字就可以,比方说news。
04:21
就OK了啊,这连这个杠你都可以不写了,News,然后在这儿再来一个,谁呢?Element,然后你要呈现的是谁呢?是这个news好,走着OK,第一个子集路由配置好了,那同理,复制一份呗,小逗号一补,那这会儿叫做message,好,那在这儿呢,就来一个呗。好了,配置完规则了,那接下来呢,就是得写导航的那个位置了,来到后面这儿,你得怎么着把所有的A变成link或者是navy link,那到底是link还是navy link,看你要不要高亮效果呗,那你回来看这,你说我们要不要他俩的高亮效果,肯定要啊,那所以说引入的时候就是谁呢nay link呗。
05:10
来到这link,好,那就把这个A换成这个,换成这个好目录缩一下啊,因为它太长了,不能写HRA了,你得写to,那这块呢也得写to,好,To怎么写,回想一下五的时候我们得怎么写。你得写home下news对不对?大家回想回想五的时候,你是路由链接也好,你是注册路由定规则也好,都得带着它的负极路由那个路径是吧,那这会儿呢,咱先带着啊,先带着home下的message OK。那接下来我们点一点试一试啊,说老师这会儿还没写完呢,你别急嘛,咱之前也聊过,点击路由链接改路径,这是一步,根据路径匹配呈现路由组件,对吧?那是另外一步,好,我们先看看啊,点击这些东西能不能出效果,好回来注意啊,点击about没问题,Home没问题,这问号本来就应该有,对吧?点击news,点击message,哎,你看路径是不是都可以发生变化呀,那就差一步了,就是这块到底呈现的是哪个组件。
06:18
哎哟,同学,你仔细想想,这会儿就略显尴尬了。你说五的时候,我们是不是把规则直接写在这儿的?你定规则的时候,你定在哪儿,那个路由组件是不是就呈现在哪儿啊,但是现在是属于你用了路由表。的确啊,咱得承认home下是有一个子集路由news也有一个mes的。对吧,你要写那个路径,我可以给你进行匹配,就是说的再直白点,人家明白斜杠home,斜杠news要给你呈现哪个组件,新闻这个组件,知道要呈现这个组件,问题是呈现在哪里,对不对。
07:04
知道要展示它,但发哪儿啊?对吧,那我还觉得放在这儿合适。啊,那我还觉得放在这儿合适呢,那这个时候就得需要一个标记,你得告诉他,如果路径匹配上了,有这规则,你得把组件呈现到指定的位置,那这个时候你就得引入一个全新的东西了,五的时候是没有的。五的时候他没有给你提供内置的路由表,所以说你不需要这东西,但是现在就得需要了,这会儿大家能不能回想起来,如果你觉得你有点懵,你去对比一下咱之前写的那个五,你想想那规则是不是都写在这儿的,其实你打开这个就能看同学来一级路由,你打开APP,那我问你当年咱规则是不是在这定的,那你说万一这规则命中了,呈现在哪里,在哪定的规则是不是就呈现在哪里,或者说我把这一堆,我如果放在这个位置呢,我给它插入进去,那以后可能就在这呈现了,对不对?好,来给这个关掉,那接下来怎么办?哎,引入那个东西叫做outlet。
08:04
就有点儿像什么呢,同学,有点像view里的RO view。啊,那当然,你要是没学过view,那咱就不提了啊,Outlet说白了就是给他一个槽位,告诉你匹配上了,你应该在这儿给我做呈现,好,直接写这个组件标签就可以了,好,那这块写一个注释,叫做指定路由组件呈现的位置,好那接下来我们看一下啊,其实已经有效果了,对吧?来控制台打开啊,防止它万一有什么警告和报错,整体刷新一波,或者咱们从头来吧。重定向是不到about,哎,那你找home OK,那你找news message是不是都可以啊,而且你还可以写的再简单点。就是在这个to的这个位置,你可以不带着它的负极路由路径了。一句话,五的时候,你注册也好,你跳转也好,必须带着负极的路径,但是六里边儿同学都可以给它省略掉了,删掉。
09:04
删掉,但是你不能写斜杠,这是都是细节啊各位你写斜杠的意思,那就意味着我不管现在在哪儿,直接从斜杠news开始匹配啊,你自己看一下啊,比方说现在是不是在斜杠后面呀,你点news,你看发生什么啊,321走,你你看发生了什么,诶这是不是直接变成了斜杠news,诶这时候报警告了,是不是说没有这规则。你得是在不破坏斜杠后面的路径的基础上,你把斜杠news加进去,那所以说这块咋的呢,你不要写这斜杠,你写斜杠就直接从根开始了,好回来来到这刷新一波走,这时候我点击news啊,是在不破坏这个负极路径的前提下,给你加的news,加的message。啊,那这块吧,其实同学是有三种写法的,斜杠代表啥呢?我不管你在哪,现在带了斜杠就是根了。
10:03
嗯,刚才你看到了对吧,再来一下看,哎,只要我带的那个斜杠走就是根了,然后还有一种写法呢,就是点杠,点杠是啥意思呢?就是在不破坏当前路径的前提下。在不破坏当前路径的前提下,来看着啊走,给你加一个news。那这个点杠也可以再简单点,就是不写,哎,所以说以后我们就直接用这种简写形式了啊,周老师,那你不写,那这啥意思强调了呀,原来啥负极路径那一堆都带着,后边我给你来一个斜杠news OK,是不比原来要简单一点,哎,Outlet是新提出来的一个东西,还有一个小问题跟大家说一下,回到这儿注意观察啊,现在的路径是什么?斜杠home,斜杠news。那所以说news亮啊很正常,因为目前你处于这儿嘛,那为什么这个home也亮了呢?因为他会分析路径的嘛,一分析发现,哎呦,你呈现的是home的子集,那子集得亮,那他爹呢,那就也亮了呗,那这里边能不能不让它爹亮呢?也是可以的啊,这就涉及到一个属性,给大家说一下啊,你在它负极呀,找到APP负极这块不是有这个about home吗?你在home这块加一个东西叫做and,哎,来看一下,就是点击about,点击home,这都没毛病,但如果有一天你点的是home的子路由,注意点谁谁确实亮,但是负极是不是不再亮了,哎,暗的就是做这事儿的。
11:40
对吧?啊,一句话就是我的子集路由如果匹配了我自己本身会失去高亮,这就是and,好,那这小节我们讲了几个新的东西呢?那逆着说吧,首先就是这个and,对吧?你先不用写笔记啊,我已经给你写好笔记了,一个是这个and,还有就是咋的,比原来要简单了,引入了一个新的人outlet,用于指定路由组件的位置,还有就是to可以比原来更简单了,再就是你定规则的时候也比原来简单了,直接写news就可以了,连斜杠都不用加了,对吧?统一管理路由嘛。好,那这一小节呢,咱们停。
我来说两句