00:00
小女孩,我们介绍了啊,Redirect就是在所有路由都匹配不到的时候,它可以去给我们重定向到一个我们指定的一个路由。啊,这里笔记也给大家准备好了啊,在这好,那在说笔记之前,我先把这个给删掉,因为等会还要复制它。这个方少敏啊,看我们的笔记啊,一般。在写在这个路由的这个最下方,就是我们这个redirect啊。就是当所有的路由都无法匹配时,可以跳转到啊radiac指定的这个路由,那具体的编码就是这样的啊。放到这个最后指定默认跳转的一个路由。这课开始,我们开始学习新的内容,嵌套路由,那什么是嵌套路由呢?之前我们写的这些都是比较单一的一个路由,就是只有一层啊,那嵌套路由呢,就是它可以有多层,比如我们写这个A下面的,B下面的,C下面的,哎,类似于这样的就是嵌套路由啊,然后。之前在学这个,呃,严格匹配和模糊匹配的时候,我们也说过,如果我们开启了这个严格匹配,会导致无法继续匹配二级路由,那其实这里说的这个二级路由啊,那就是啊,一个路由下面,比如home,它下面还有其他路由啊,这个我们称为它的二级路由,但是有时候它的这个级别是很多的啊,A下面还有B。
01:21
B下面还有C,哎,所以哎,我们有时候称之为哎,为什么呢?嵌套路由就是一层嵌套的一层啊,C在B的下面啊,B在A的里面,这个A在这个home的这个里面啊。啊,一般我们说这个二级路由的话,就是呃指这个呃顶级路由的这个子路由啊,就是它后面的这些啊,但一般我们都会说啊,说是嵌套路由好那。理解了什么是嵌套路由之后,我们就把这个代码给复制一份,啊,把这个笔记关掉。复制一份到这里。呃,零八。N啊,这个是嵌套的意思,Root嵌套不用。
02:03
之后在终端啊,把这个之前啊运行在零七这里面的这个停掉啊。回到零八这个目录,零八。然后去安装需要的一些依赖。那先让他装着啊,我们来看一看我们用什么样的例子来去啊,写这个嵌套路由。看一下桌面,哎,在这个里面啊,然后我们在。浏览器中打开看一看。这个就是我们用来去呃写这个牵头路由我们提前准备好的一个页面啊,可以看到其实跟这个还是有点类似的啊,那主要不一样的地方是在这个about里面,在这个about里面可以注意啊,我是不是又放了一个导航啊,又放了一个链接,当我点击这个链接的时候,诶,它会显示对应的一个内容啊,当然这个没有使用路由,这个我在点它的时候是切换的不同的这个页面对吧,因为这个是我提前准备好一个页面,为了节省大家的这个时间,我们就啊不直接在这个。
03:01
哎,讲课的时候去写这个页面,所以提前准备好了,但是我们要实现的啊,这个例子就是这样的一个例子,只不过这些去切换页面,和之前我们去写这个例子一样,我们要把它给啊改成react router,然后点击这个导航链接啊,去切换指定的这个组件,我们要改成这样的一个形式啊,那其实呃,这个。例子就是一个很很经典的一个嵌套路由的一个。呃,一个例子啊,那我们来其实分析一下啊。我们这边是一个导航区域对吧?呃,是一个这个切换导航条,这边是一个内容区域,对不对,但是在这个内容区域呢?啊,它又分了什么啊,这个是我们展示的这个内容,然后这里又是一个导航区对吧?那这里呢,又是一个展示内容的一个区域啊上面这个我们先不说啊。啊,因为上面这个有点类似于这个标题是不是,哎,我们单看底下这块,这是不是一个导航区域,我们点击不同的这个导航,它要在这里展示不同的这个内容,对不对,可以看到啊。
04:01
是这个路由about啊,这个路由里面又嵌套了一组路由,是news和message。这个就是我们要写的一个例子,好来看一下代码,代码呢已经给大家放到了这个里面啊,在这里我点开一下,先看一下news啊。News啊,和之前我们写路由讲路由用的那个例子一样,那之前我们讲路由呢,例子是到哪呢?是不是到这儿,就是它是什么什么内容,然后只不过这这里我在这个,诶about这个下面又加了一个分隔线,加了一个导航区域,加了一个内容展示区域,对不对,好,那这是一块,这是news这个页面啊,然后这个是啊,Message这个页面,Message这个页面啊和news它。呃,大致是相同的,因为是这里,你看我点的时候,它是不是这些区域大致都是相同的,那不同的只有什么?只有这个内容区域不同,是不是还有这个导航高亮的不同,对不对?哎,这是演示的一个效果,那如果从代码层面来看,我在这两边去切换一下,你看看哪里不一样,哎,你盯着这个区域啊,因为这上面都是一样的啊,是不是只有这个。
05:05
这个active在一直在变啊,那我在这个news的时候,这个news它是一个active的状态,然后我在这个message的时候,Message它是一个active的状态,再然后就是内容区域展示的不同,对吧,我news这里显示的是这个NEWS0123。然后这个message是显示的这个MESSAGE023,并且还加了一个A标签,加了个链接,是这样的吧,啊啊,只有这些不同,好,这是页面上的不同之处。嗯,我们为什么要去看这个页面的不同之处。我们要经过这个,呃,这个例子的一个分析,或者说经过这个代码的一个分析,我们要把它给拆成组件去放到这个,诶,我们的代码中,因为。这个例子它切换的是不是页面,诶之前在讲路由的时候给大家说过啊,我们这个react它是单页的一个应用,我们整个应用只有一个页面,那我们通过点击这个,哎,这个导航链接去切换的什么,其实是切换的不同的组件对不对?哎,所以这里我们要开始去拆分组件了啊,其实哎比较显而易见。
06:07
和之前我们去呃拆这个的时候是一样的啊,那只有它一直在变,是不是我点击这个news的时候,哎,给我展示这个news相关的内容,我可以把它拆成一个组件,对吧?我点这个message展示message相关的内容,是不是也可以把它给拆成一个组件,对不对?好。那回到这个代码来分析,也就是说,哎,这个地方我要拆成一个组件,哎,比如说是这个啊message,那这个地方我要拆成一个组件,哎,比如说是这个news,对不对啊,那这个导航区域,你注意看一下,导航区域是about,也有的是这个。这个。啊,是这个。就是说about这个页面啊,就是说这个about这个页面是属于它的一个内容,对不对,因为你不管message还是news,你都需要这个导航区域,对吧?好,接下来又开始去啊。呃,这个把这个代码拿到我们的项目中,把它给拆成组件啊。
07:03
哎,这是为了节省大家时间,我提前把这个例子写好了,然后去往这个react里面去迁移,但其实真正上我们去写这个react的项目就没有这么麻烦,谁还给你先写好了,静态页面我们都是直接在这个react的项目里面,哎,你感觉你需要这个组件呢,就开始去写,直接在这里面去写,包括这个样式都是直接在这里面去写的。清楚了吧,啊,那这边已经安装完了,我先把它给运行起来啊。好,这边先给它运行起来。之后我开始复制代码啊,那按照我们刚才的这个分析,我们这里要拆成一个组件,这里要拆成一个组件,所以现在我要去建两个组件,一个new,一个message,然后我们看看这两个组件建在哪,首先啊。呃,很明显的,它是不是路由组件,因为在我匹配这个路径的时候,我去渲染这个组件,在我匹配这个message这个路径的候,我去渲染这个组件,这个组件不是我们自己去引用的,对不对,是这个,呃,路由它监听到这个路径的变化啊,去帮我们引入的啊,对吧?那当然现在是静态页面先先不用不用看这个啊,啊我们是说这个,呃原理对不对,所以它应该是一个路由组件,那路由组件我们应该放到哪里,是不是放到这个。
08:15
配置里面对不对好。放到这里面啊,这是之前讲的一个test啊,把它删了,这个应该是没有什么用啊。看一下啊,这里这个test。啊,是没有用到的啊。那就把它删了,是不是应该放到这个里面,哎,放到这个路由组件这个里面,接着再来看一下啊。我们来看一看这个news这个组件,还有这个message组件,它是在谁里面去展示的,是不是在这个about这个组件里面去展示的,所以说也可以,呃这么去理解,它俩是其实是作为这个about这个组件的一个子组件,对不对?那这样的话,你去建立这个组件的时候,你就可以直接把这两个组件去建立到这个about这个组件里面来形成一个嵌套的关系,这样方便我们去寻找啊,方便我们去呃阅读代码。
09:03
清楚了吧,啊好,来接着。我来在这个about里面去新建一个,呃,先建一个目录啊。柚子。然后里面新建一个。文件index.gs叉好rcc,然后把这个改了啊,这个index改成。来这一块我就不是返回这个空的了,返回谁是不是返回。找到new的这个块是不是这一块对吧,我们刚才经过对比是要把这一块和这一块提成组件嘛,是不是啊,我复制一下它。放到这个里面。放到这个里面之后,诶,这个new组件我们就创建完了,接着再来,诶复制一个,改一下这个。我是直接整个复制目录在这个文件啊。再建一个message。
10:00
OK。找到这个message啊,注意这两个组件,我都是建到这个about这个组件里面的啊。因为他们两个是作为这个about子组件我们来使用的,接着要把这个呃in要改一改啊,那这个是。以及message来这里啊。这里也是一样啊。这个地方要把它删了。替换成对应的message的这一块内容是不是?复制一下,粘贴好,这样message也改完了。这两个组件改完之后。接着我们改下什么呢?看一看这个效果啊,组件我们已经准备好了啊,是不是我们还要把这个导航给放到这个about这个组件里面,哎,就是这个这两个导航对不对,来找到这个代码,看这个导航在哪。是不是这个区域我们把这个HR也复制,它是一个分隔线啊,上面的内容进行一个分隔啊,就是一个分割线好看一点啊。复制一下。诶,我已经复制了一下这个代码啊,这个导航把它粘贴到哪呢?找到这个about组件啊,这个是about组件,我们把它粘贴到这个下面,但是你这么去粘贴,你看它明显就出现了一些问题,对不对?诶这是因为这个它最外层它有一个啊,只能有一个标签嘛,那我们再给它包裹一个div啊,把它给放到这里面,然后把它给放到这里面,这样就不会报错了,对吧。
11:24
啊,这个是我们多包裹了一层,要不然就会报错。好,导航区域有了,接着按照我们的结构啊,代码结构来看,导航区域下面就应该去,呃,引入这个。啊,Message和news这个组件对不对,也就是在哪呢?在这个下面我们该引入message或者这个new组件,对吧?啊,那你既然要引入这个组件,这里是不是先先导入对不对?Import啊,我们先引这个news。From,诶,当前目录下的news,所以它自己就变成了当前目录,因为这个news在它目录下面是吧,那如果是像在这个顶层目录的话,你还要点点杠去翻上去,然后再去找这个啊page啊,或者是components这么去使用,那这个news是直接在它下面,所以直接去使用的,对吧?你如果在这个app.gs里面,你还要找当前目录下的这个page来这样去使用,所以说你注意这个目录啊,注意引入的这个目录,那我直接。
12:18
再把这个message可以导入进来message,哎,它自动帮我补全,这个是编辑器比较比较智能的。好,这两个组件有了之后,嗯,我先直接在这写啊,先直接写,先让大家看看效果能不能出来。好来保存。保存之后我们去浏览器中看一下啊,在这里啊,当然你现在是看不到,现在我们在home,我们改的是谁,这个about对对好点,是不是有了。对不对,当然你这个点点不了啊,因为这个导航我们还没有处理它的链接是这样的吧,嗯。好,现在是有了,哎,但只不过是他俩都都展示出来了,而且这个高亮呃,我们也没有处理,所以这个高亮我们现在先不给。
13:04
接下来。想一想,回想一下之前我们讲这个路由的时候是怎么写的,诶是不是我们要先那个编写路由链接,然后去注册这个路由,对吧?我们也是按照这个思路开始去写啊,因为你只有编写了路由链接,诶这里面我们才能去,呃点击切换,切换不同路由,那只有诶注册了路由,当匹配到不同的这个路径的时候,才会给我们展示指定的组件,而不是都显示出来,对吧,来。那我们一点一点来啊,先编写路由链接啊。在这里写吧,啊。编写路由链接。编写路由链接。编写路由链接,哎,我们来想一下,因为它还要具有这个高亮效果,所以我们不能使用那个link,要使用never link对不对,那never link呢,用着又比较麻烦,那我们自己是不是封装了一个这个买na link。
14:02
是这样的吗?好,那我们就使用这个啊,买level link啊。在这个about这个组件里面,我们要使用的话,也先把它给导入进来,Import。嗯,买。Na link。From注意啊,你现在写的是这个about对不对?注意你写的是谁,写的是这个文件,他要去找components里面的买never link是不是要啊,点点杠。在这里啊,要点点杠,你先翻出去,翻出这一层目录。然后就到了什么呢?点点刚你翻出了about这次目录,现在是在配给这个目录。是这样的吧,啊,那你还要再加点杠,哎,是不是就可以找到components里面的这个ne link,好,这时候就可以去使用了啊。啊,我们这么去写。它有一个突属性,因为这是我们自己封装的嘛,就是我们要匹配的这个。
15:03
啊,这个导就说路由链接对不对啊。那比如这个我叫news。哎,又死。接着复制一个。嗯,小写是吧,那这个小写,我们这个也小写啊。好了啊,这两个我都不要了,给它删掉啊,注意啊,你如果你用的编辑器,在你把代码都粘贴过来的时候,他没有帮你把class改成卡拉name,你要自己改一下啊,因为我用的这个编辑器,我再把代码粘过来时候,这些它自动都帮我改了,看看是不是。啊,这个提醒一下。路由链接编写完了啊,那接下来就不能让他们两个都展示了,我们要把注册路由啊。注册路由啊。嗯,注册路由我们是不是就要用到这个root对吧,那你要用到这个root,你是不是得先引入,上面还没有引入对不对?来我们先引入之后再去试。
16:09
再去使用啊import。诶,从这个里面r from the。Relax root杠到。这个时候才可以去使用这个啊root啊。去注册这个路由。好,这两个我就先删了啊,注册路由呢,第一个是我们要匹配的这个pass啊,比如我们匹配这个啊news,然后是你要去找的对应的一个组件啊。那匹配到这个news,我就给你使用,谁使用这个news组件,那接着复制一个改成这个。好,那这里使用这个message组件。接着呢,我们把它给放到一个维奇组里面,我们之前讲过这个维奇的话。它可以提高我们的匹配效率,是不是诶。
17:03
这样把它放到这个里面。好,这时候啊,路由链接我们也编写了,路由我们也注册了,这时候我们来去看一下效果啊。那这个我先把它删掉,哎,它会帮我们重定向到这个。Home,哎,重新到这个首页,那这个是肯定没有内容的,我们是在这个about这个组件里面写的,点开看一下好。它内容,然后这两个导航有了,然后下面还没有任何内容,没有任何内容是因为我没有点对不对,而且这两个都是news啊,你应该有问题把它改一改。是这里忘了改了,应该改成message对不对,这个是我们显示的一个标题,好,现在就对了,对吧。接下来我来点一点这个路由链接,看好不好使啊,注意我现在开始点这个的。诶,点了之后,他回到了这个home,这是为什么呢。哎,这个给大家分析一下啊,注意啊。看一下我们这里,我们注册路由,我们写的是什么,写的是不是这个news好news,嗯。
18:02
来,也就是说当我们去点这个啊,点这个啊。点这个路由链接的时候,因为我们这里写的是new,对不对,点这个路由链接的时候啊。也就是我们的地址栏中的这个路径,它会变成这个news,对不对,这肯定是没问题的,好。当它变成这个news的时候,现在我是手打,手打我接着回去给你们看看啊,它也会到这个后面,这是为什么,我们来看一看啊。从这个f.GS我们开始看,我把这个挪到这啊,那这两个因为就没有什么用了,就先给关掉。我们从那个f.GS开始看。一开始。我们。从这里开始去找啊,就是说一开始我们输入的是这个根对不对,也就是说不输入它相当于也是一个这个斜杠的一个一个路径对不对,它匹配不到,匹配不到走到哪里,是不是走到这里给我们重对上这个home,这没问题对不对,所以现在应该是在这个,呃,显示的这是个home的这个组件啊,确实也是这样的啊。
19:01
接下来注意啊。看一下我们这里注册的这个路由,目前注册的路由都有谁?是不是只有这两个啊,这两个是吧,因为我们这个路由你看一看,它是编写在,就是说在哪里注册的,是不是在这个,呃。About。这个组件里面注册的,注意啊,这是about组件,比如我们这两个路由,它是在这个about组件里面注册的,对吧,那你看一看现在的页面是不是是渲染的这个home组件的一个内容,也就是说这个about这个组件,它现在是不是还没挂载呢,没挂载到页面上。对吧,那你告诉我,你这个about这个组件现在都没有往页面上去挂载,也就是说你这些相当于没有注册对吧,这些代码都没有执行的对不对,因为这里匹配到这个home,你看匹配到这个home,给我们旋转home组件。没有去渲染这个about组件吧,那既然没有渲染,所以那这里就相当于就都没有执行,那你路由自然就没有注册明白了没有。
20:02
路由就没有注册清楚了吧。接着我们再来看啊。给大家点一点就分析一下啊,现在我点about好点about它是不是匹配到了about,给我们展示了about的组件,对不对。那展示到了这个about这个组件之后啊。注意再来看啊。也就是说这些现在已经都注册了,那接着我去点这个链接啊,点这个链接呢。地址栏中它会变成谁,就说这个pass会不会变成这个news啊?然后。不是大家想的,我地址栏中我变成了个news,立马去匹配我注册的啊,这个news,这个路由。对呀。路由的注册是有先后的,谁先注册的,是不是他俩先注册的,就是我们这个f.GS先注册的。清楚了吧?因为他注册完我们才去点的啊,这个about才去注册的它对吧,所以说我们地址当中变成new,你就来匹配吧。
21:03
匹配它匹配不上,匹配它匹配不上,那就只好去重的home了,这是也是为什么我这里是如果输入这个news的话,就会到了这个home这个组件,包括我点击的话,因为你点击的话,你可以看一下这个啊,这个左下角是不是还是这个news和我们手动输入是一样的那。他地址栏中变成news,它又匹配出了路由,它就给我们重定向到了这个home。是不是这里的一个问题?对不对。可能要说了啊,那这里有问题,我把它注释掉不要了,哎,我不让你去给我匹配这home啊,那这时候你再来看啊。现在我先回到首页啊,因为你把这个给注释了,所以说我现在没有匹配到内容,没有匹配到内容我就什么都不展示,是个空,对吧?好点home,匹配到home,显示后面的内容,然后点这个about啊,匹配到about,展示about组件的内容,然后这也是about组件内容,对吧?接下来我去点这个news啊,来注意啊,我点啊地址栏中,哎,这个pass是不是变成这个news,它为什么还是没有内容?
22:03
还是我刚才说的呀。啊,是这些路由先注册的,明白了没有。啊。是这些路由先注册的。只有当这个about这个组件渲染到页面的时候,这些路由才注册,所以说当我去点击这个,哎。切换到就是说把这个地址栏中路径变成news的时候,它会从先注册的这个录入里面去匹配来我们拿着这个news。来,我先写到这啊,拿着这个斜杠柚子,你去匹配它能不能匹配到,匹配它能不能匹配到?是吧,又而且我们又没有做默认的处理,所以说哎,空白就显示空白明白了吗。好,那说了这么多。其实想说一件什么事情,也就是说我们的这个路由是在谁里面去写着的。是不是在这个about组件里面去写的,也就是说我们想要让这些路由生效,那必须干什么?你必须得先把这个about给匹配到,先把这个about组件给展示出来,接着这些路由。
23:04
才能生效是不是你怎么办?哎,这时候。就可以做什么啊,可以把这个。给改一改,改成谁就说我点击它的时候,我不直接去跳这个,就是说去把它变成这个news,我先把它变成谁,先把它变成about。对不对,因为只有。我前面有了这个about,它进行一个模糊的匹配,我没有写那个严格模式吧,它进行模糊匹配的时候才能匹配到这个about是不是。对不对啊,那匹配到模糊匹配到about之后,About组件就展示了,对吧,那接下来。也就是说我这些注册的这个路由就生效了,就能匹配到它,是不是,当然你这里改了,你这里是不是也得改。来,我来复制一下啊。这里改了啊,那都给加上吧,加上之后再给大家说分析这个原因啊。啊,因为刚才我们分析了这么多啊,只有当你这个about,你这个组件挂载了页面,我们注册这些路由才才生效,对不对,但是怎么样让你about这个组件挂里面,那就得匹配到这个about对不对,那你要匹配到这个about,我们是不是可以利用这个,呃,路由的这个模糊匹配,哎,我们把这个链接导航链接给它前面加上一个about这样个前缀,这样的话。
24:21
诶,他有这个前缀,他就会匹配到这里,就会打开这个about,又接着又因为我们路径是他。对吧,路径我们定义的是这么长一串,哎,是about下面的news,那它就会和它进行匹配,就会展示这个news这个内容。清楚了吗?啊,记住一个前提啊,还是我再给大家总结一下啊,你要想让这个。里面的这个路由生效,你必须得个about它你得挂载对不对,那又想让about它这个挂载,你必须得能匹配到about对吧,但你如果你完完全的匹配到about,你这个子路由就没法处理了,所以我们呃,利用这个路由的这个模糊匹配的一个机制,哎,去这么去处理,来看看效果先啊。
25:01
先从还是从这个,呃,一开始开去找,哎,没有找到,给我们重定向到redirected到这个home对吧,那about。好,正常,接着我来点这个news。可以看到啊,路径这里面变成了这个news,哎,这里面正常展示了,对吧?好,那我就按照这个结果再给大家分析一下啊。首先我就单看这个,呃,路径,路径里面我是不是包含about about,我既然包含about,我从这里面开始去匹配这个路由,是不是能把这个about组件给给这个挂载的页面,既然包的组件能挂载的页面,那我这些路由都是注册啊,都是生效的对不对?接着我路由注册生效的好,那就开始去匹配匹配他。啊,匹配这两个about news,看能不能找到about news是不是找到了,那就直接给我显示这个组件。是不是这样的?嗯,好,这个是关于这个啊,那接着我们再来做一个优化啊,什么优化呢。来看一下就知道了,我一点到这个about。
26:01
他是不是。没有这个,呃,就说一开始我进来这个about,是不是它显示一个空,这样也不合适,我们想让他也一进来,就说当我们不点的时候,它也去,呃,去默认去选中一个啊,那这个是利用谁,是不是和这个方式一样,我们利用这个redirect对不对,但是这个redirect你要用也得啊,它自动把我引入了,刚才我在粘贴的时候自动引入了啊,你如果没有自动引入,就是你得先引入再去用它。那他一进来,我让他去显示谁显示他,也就是当我匹配不到任何路由的时候,那我显示第一个啊,也相当于给了一个默认显示的一个。呃,一个路由。好,这个时候再来回过头看一下啊,好,那时候我先从头开始走啊,因为第一层路由我们如果找不到的时候,会给radio大的home对吧,当我点到about的时候,嗯,会。就说一开始没有找到就会显示这个news啊,这个切换都是好使的,那这样我们这种嗯,多级的路由啊,也就写完了啊二级的这个路由,但实际上因为我们的这个路由的话呢,它可能是一层嵌套一层,这里只是我们嵌套2G,哎,我们说二级路由,但它下面可能还有其他的A下面的B下面C,诶所以我们一般说是哎嵌套路由就是一个路由又嵌套一个路由,那看我们的代码这里面也是。
27:20
就是说在这个路由组件里面是不是又嵌套了其他的这个路由,是不是,如果你这个路由组件里面就是news里面还可以,还有其他的路由要嵌套,是不是可以一直嵌套下去,但实际上比较常见的一般两层三层就就够了啊,四层以上就很很少见了啊。啊,那这个就是我们这节课要讲的内容,嵌套路由啊,哎,注意啊,嵌套路由这个路径你一定要加上它的这个负,就说相当于这个它的负极的这个路径吧,啊,因为你只有当你先匹配到这个组件,先挂载,把这个组件挂在页面,你才能继续让你的注册这个组件生效,再一个大家要记住一个原则,就是路由的匹配,它是从这个最先开始注册的地方去匹配。
28:01
明白了吧,嗯。如果匹配到了,他就给你展示对不对,如果匹配不到就不展示。啊,因为我们的呃嵌套路由是定义在这个呃子路由组件里面,所以我们得先匹配到它啊,才能让这个里面的这些呃,我们设置的这些注册这些路由生效啊。好,这节课。再来加一个东西啊,嗯,就是这个严格模式啊,一旦我给他开启了这个严格匹配模式,哎,等于出版给他写上。严格匹配模式,就是说你必须得完全等于它才行,才能匹配到他,哎,这个时候就会出问题了。这个时候会出什么问题?也就是当我点它的时候,因为我的路径会变成它,它变成了它之后。他去匹配就匹配不到它了,匹配不到它,那这个组件就挂载不了,这个组件挂载不了,那这些路由就匹配不上,清楚了吧,我们来看看效果,第一个我就不改了,我只改了第二个。好,刷新。现在点塔。
29:00
点击啊,点击了很多次没有效果,很神奇的一个问题啊,那看看是不是报错了,你来看把它清了点,是不是也没有报错,正常输入,那这是什么问题,我一点点大家看一下啊,这里我来改成about啊,我来手动去写。好,注意看,当我手动去改这个的时候,它给我闪了一下,然后重新跳到这个home。也就是说,其实我们点这个about地址栏中是变了about了,只不过又突然变成了home,那这是为什么呢?哎,这个就比较绕了,我们来一点一点绕呀绕一下啊,首先我点了它之后,路径是不是变成了,我就在这想啊,路径是不是变成了about对不对,好,About开始向这个注册路由去匹配,匹配它匹配不上匹配它,即使你开了严格模式,这是about支持about是不是也能匹配上,好匹配上之后注意啊。它就进到了哪里面,进到了这个about组件,就是它去渲染这个about组件对不对,也就是说现在about组件我们脑海里想它要呈现到这个页面对吧,那about组件呈现的时候,我们在about组件里面又干了什么,是不是又来注册了这个路由,编写了这个路由链接对不对,注意啊。
30:03
现在我们来看,现在我们地址栏中的这个路由还是谁呢?是不是还是这个about呢?对不对,因为从这开始这里是about嘛,那它只是渲染这个路由,它是不是还是about呢?好about,它开始去匹配我们注册的这个路由啊,匹配它能不能匹配上,匹配不上对不对,匹配它是不是也匹配不上啊。但你你不要搞混了啊,你说你这个这个为什么匹配了,我们说的这个匹配是你这个链接,你可以长很长很长很长,你可以包含这个路由,这个路由模糊匹配,可能给你匹配上,但是你这个链接如果就这么短,你第一位都匹配不上,那就不行了啊,那假如什么情况下啊,假如我给大家写一下,你是一个这样的一个情况下,About下面的news。啊,你下面的A下面的B下面的C,你如果你的路径是这样的一个情况下,你能匹配到它是吧,因为模糊匹配嘛,对不对,但现在你你就这样肯定是连对都对不上的啊,我们说的这个模匹配是是他能模糊匹配你这个链接啊,你链接比较长的清楚了吧,但是这个pass你至少得让我能完全的先匹配上我定义的这些之后,你后面我就不管了,是吧,我至少得先能匹配上我定义的这个pass。
31:16
你后面有什么我不管对不对,好接着说啊。他匹配他肯定匹配不上,你都不够,你就到这你都都没了是吧,好那。他是不是也匹配不上?对不对,注意啊,我们B纸栏中现在还是about呢。那都匹配不上,是不是redirect生效了?Redirect给我们重定向到哪里?重定向的about news,也就是现在地址栏中已经变成了它。清楚了吧,地址栏中变成了它。接着我刚才还说过啊,大概在十来分钟前,我还说过路由啊,它在匹配的时候,这个路由链接在匹配的时候,是不是先匹配我们先注册的。对吧,那这里是不是先注册的,也就是说现在地址栏中变成了它,哎,变成了它之后,回过头来从我们这个先注册的这个里面开始去匹配,来匹配它符合吗?不符合,来接着往下走,匹配它符合吗?啊,以前是符合的,但是现在是不是开的严格模式,严格模式就是你必须打我和我完全相等才可以,是不是这里也进不去跳过那都不符合,是不是就回到了这个后面。
32:19
看到了吧,这也是我们这个效果,你看你不管怎么点,它都会回到这个,哪怕你去手动输入,它也会回到这个home。对不对,好,我在这个地址栏中给大家模拟一下刚才这个运行的过程,我地址栏中,哎,我不管是点这个about也好,或者我说我手动去输入这个也好。因为匹配啊,匹配上这个about之后显示组件,About组件呢。这里啊,它都没有匹配上,是不是给我给我们去显示这个about news,好,现在地址栏中变成about下面的这个news接着。About news,然后他去从哪开始,从这里我们先注册的这个,呃,这个路由的地方开始寻找,找不到,因为这里开的严格,也进不去,也找不到,就重向到home来,接着你看这个地址,我回撤是不是回到这个home。
33:04
清楚了吧,好,经过这么长长时间的一个演示,就是为了给大家说,你如果你开启这个严格匹配你这种二级路径,你就进不去了啊,这也是我们之前总结这个笔记所说的啊。不要随便开启,如果你你开启的这个严格匹配,有时候就无法去匹配这个二级路由,甚至是这个多级路由的一个情况。啊,除非你真的真的特别需要你再去开启这个这个严格模式啊,啊,那这里也给大家去演示了一下。好,那这个这节课要讲的内容主要是这种啊,嵌套的路由啊,这里已经就说完了啊,我们把这个严格严格这个匹配已经给关了,现在都是正常的,那我们回到这个首页,给我们重电号的home记着点about,诶把我们重电new这些都是可以切换的,那这小节先到这里。
我来说两句