00:00
节课给大家讲了这种嵌套路由,这里给大家形成了笔记,大家可以看一下啊,那我们等会儿再来说这个笔记。我先把。呃,这个该删的东西删一删,然后去复制一份新的项目。好,现在山者来说我们的这个笔记,第一个就是说在注册这个子路路由的时候,我们要加上这个附路由的这个pass啊,就是比如我们要给这个about,哎,加上它的这个子路由,那要加上前面的这个pass的这个路径,哎,比如说它下面的A。或者它下面的这个B一定要带上这个pass路径啊。再然后就是路由匹配的时候是按照注册路由的顺序进行的。因为我们的app.gs里面这个路由是新注册的,所以在我们呃地址栏中啊,路径发生变化的时候,他去匹配这个路由,是按照我们注册这个顺序,先去匹配这个app.gs里面的一个路由,诶如果匹配到这个之后,再去加载这个组件,那这个组件里面呢,如果我们还定了这个啊嵌套路由,再继续去去匹配,如果都没有匹配到,就是直接走这个radioac啊啊,这是我们的这个嵌套路由,把这些关一下啊。
01:13
这个折叠一下,再来复制一个开始今天要讲的一个内容。先把这个代码我们先准备好,然后接下来给大家说一下,今天这节课要讲一个什么内容啊。诶,等一下啊,我先进到这个目录里面,把需要的依赖装一下啊,CD上一级零九,然后呀。来看一下浏览器。这节课我们要讲的内容是。呃,打开这个吧,我们在浏览器中运行一下啊。哎,就是这样一个例子啊,就是当我点击这个。链接的时候,哎,之前我们这里准备的是就是普普通通的一个A标签,对不对?哎,那这里呢,我们今天要写的例子是它不再是一个普普通通的A标签,而是一个诶路由路由导航路由链接,那我当我点击它的时候呢,这里会展示对应诶001的一些内容,比如消息一啊001,然后输入诶这个对应的内容,当我点击这个零二的时候,那这里就变成002这么一个内容,对吧,点零三变零三好。
02:18
首先我们得来分析一下啊。这是我们要写的一个效果。我们从整体去分析啊。那这个头部我们就不说了,从整体去分析,这边是不是一个导航区域,是不是一个路由链接好那这边。是我们展示内容的一个区域是吧。啊,内容的区域我换个颜色啊。那这个红色的。也给它换一下,换成这个蓝色吧,内容区域我们就用蓝色,导航区域用红色啊好。蓝色啊,接下来这个。啊,这个是红色我们的导航区啊。来接下来啊,这里。是我们的内容区,哎,我用蓝色给标记起来,对不对,这是导航区,这是内容区,接着再来看。
03:03
那。这个内容区域,哎,我们这个包的组件,那这里是不是又是一个导航区域,对不对,而这个导航区域啊,我们先把它给圈起来啊,这个导航区域。它显示的这个内容区在哪,是在下面。这一块对吧,它是它的这个内容区域。看到了吧,啊,但是它的这个内容区域呢。它这里面,诶,其实这又是一个一个的导航,对不对,又是一个导航,然后它展示的内容是展示到哪里,展示到这里啊。啊。接下来开始去写我们的组件啊。我们一步一步来,首先把这一块给改成我们的路由链接,因为现在还是普通的A标签对吧,那它是在哪呢?它是在这个about这个组件里面来先。找到啊零九,我们在零九这个里面写。找到这个路由组件里面这个about组件啊,这个。
04:03
Message里面啊,刚才说错了,它不是在这个about组件里面,它是在这个。Message这个组件里面啊,所以我们要找到这个message这个组件来去把这个普通的链接改成路由链接啊。这里还是A标签的啊,那我们要把它改成路由链接,首先我们来想一个事情啊。这里啊,其实是我点了这个就切换这个啊,显示001的,那我点了这个就显示零二的对不对,它并不需要一个高亮的一个效果,那这种你看蓝色背景的这种是一个高亮的一个效果,它不需要对吧,它不需要的话,那我们就没有必要用那个neli。是不是用普通的link就可以了。来,我们先。导入啊导入谁呢?这个普通的这个link,哎,这里可以直接提醒帮我们引入啊,但是你自己去手动去打也可以,然后把这个A标签。哎,我直接批量选中啊。把它给改成这个link。
05:01
诶之后这个half呢,就没有了啊。因为如果使用这个link的话。那我们这里应该是使用是to对吧。好,这个时候,哎,这个。把这个注释也写一写啊,这是在干什么是。编写这个。路由啊链接。这里我们先暂时不处理啊,因为现在还不知道往哪去,呃匹配,因为还没有注册路由对吧,接着看一看页面的这个结构,它下面是不是要展示这个内容对不对啊,展示这个详情。那他呢?我们看一下这个代码,诶,看一下这个代码的结构是不是展示的这个详情,在这个我们的路由链接它下面对不对啊而且。我们是不是还得把它给拆成一个组件,因为我们在点击不同的这个路由链接的时候,要去,诶去展示这个不同的这么一个内容,对吧。
06:03
然后呢,我们再来想一想,因为这里我们定义了这个路由链接,那下面我们是不是得去匹配这个路由链接,所以说这一块的这个内容,它是一个什么组件,就是我们如果把它拆成组件的话,是不是也是一个路由组件,而且。这个路由组件它是在谁的这个里面,是不是在这个message组件里面,对不对,所以我们把这个结构捋清楚之后,接下来就在这个message里面去新建一个。文件夹,嗯,叫这个,因为它是一个详情嘛,我们就把它叫成这个detail啊。然后新建一个。index.gs叉。RC。哎,我们在这个message下面去创建了一个啊,用来展示这个message消息详情的一个路由组件,因为我们整个是在这个配置下面嘛。好,这个虽然嵌套的这个层数有点多,你对比这个粒子,你一层一层往下面数就可以了。
07:04
接下来把代码给拿到这里,找一下这里我们提前准备好的代码。然后粘贴到这里。好,这里我们就先写死先不用管啊啊,先用XX吧。来,接下来。这个路由组件我们已经准备好了,那是不是在在下面去。在这儿吧。看一下我们这个结构啊,我们这个结构它是和它有一个这样一个间隔啊,然后这个结构呢,我们可能要调一调,就是说我们把它给。拿到这个里面看看它的这个样式会不会出问题啊。来把这个调一调。右键在理论集中运行。啊,这样也是没有问题的啊,没有问题可以啊,那没有问题的话呢,我们就在这个下面去。
08:00
注册。路由啊。注册路由。嗯,刚才我是怕这个他的这个样式出问题,所以去这个静态页面去临时调整一下结构,因为之前写静态页面的时候,我是把它放到这个外面,对吧,我现在把它挪到了这个里面,嗯,也看了一下没有没有任何问题,那所以说我就直接在这里去注册路由,然后注册路由呢,呃,就会把我们刚才写的这个,呃,Detail这个详情这个路由组件给引入进来,诶注册路由呢,我们要使用这个root对不对。好在这里引入这个入场。T啊。来啊。注册这个路由啊,匹配谁呢?匹配诶。在这里来我们开始现在就开始写这个链接和就是说写这个路径和要匹配的这个路径了啊回想一下之前我们上一节讲这个多级路由的时候,对吧,嵌套路由的时候,是不是说我们在定义这个子路由的时候,一定要带上这个负极,这个pass这样的话才能。
09:03
让子路由,哎,正常的能访问啊,所以说那这里我们就开始去一层一层去带了啊,哎这些就可以改掉了啊。啊,首先。我们知道这里我们要编写的这个路由链接是为谁服务的,是为了匹配我们写的这个详情的,对吧?那这个详情你看一看,它的负极是谁?是message,那message的负极谁是about,所以我们要从这个about这个路由组件开始写起啊,About a它下面的谁?Message对吧?Message下面的谁?Detail对不对?哎,我们这么去写来。这些啊,复制一下都。好复制一下,那我要匹配谁匹配。About message detail,然后匹配到这个之后,我来显示谁显示哪个组件,显示我们的这个detail这个组件,对吧,那你这里要显示上面肯定要引入啊,来引入啊。Detail。
10:00
啊,也是当前目录的啊,因为我们是在这个message嘛,在这个里面写的,所以当前目录的这个。这时候引入之后就可以去使用了。好,我们先运行看一下效果啊,现在这里还没有运行。等它运行成功啊,那这个静态页面我就先关掉了。这里啊,我就先删掉,从这里开始访问啊,因为我一删掉的话,它找不着就会回到这个啊home,接着我们点about,好,那这里显示的news对不对,然后我点到这个message。呃,这个内容直接出现了啊,明显是有点问题,因为我还没有点这个录链接,对吧,那我们看看这个代码。嗯,是诶,这里这里我们注册路由的时候,这里是pass啊,刚刚写错了,那把它改成pass之后再回过头来再去看一下啊,我从头去点啊。点到about组件,点这个message对吧,现在这里面是没有显示的,当我去点了我们这个路由链接的时候,它才会去显示,这才是我们要的一个效果,对不对。
11:06
接下来我们先做一个优化啊,做什么优化呢?可以看到这个路由链接它是诶001002003,如果我们还有很多这个消息的话,比如说004005,那么一个一个写肯定嗯,不是太合适,所以。因为这些结构都一样嘛,那我完全可以去来定一个数组,我去便利这个导航,哎,我们在这里去定义啊。State啊,等于。在这个里面我定一个message。诶,这个里面数组里面。我去放什么呢?放一个一个的这个。这个导航啊,那首先给一个ID。比如第一个ID001,然后再给一个开头,因为这里还要显示这个内容是吧。再给一个title。
12:00
Title。比如说我写成这个消息一。好,来,多复制几个。把这个改成002003小写二。消息三,那这块我就。开始去写这个啊,遍历了啊,类似这样。State点。Map。这个词message笔记是便利的一个一个的这个message,然后在这里面我去return谁,Return我们这个结构对吧。好在return这个的时候,这个下面我就不要了啊。然后。我们把这个该替换的替换一下,首先这个是谁?是message r BG,对title对不对?然后。嗯,在这个进行便利的时候呢,我们还要给外层给他一个KK呢。
13:02
因为这里直接有ID,所以我直接使用这个ID就可以了。第2ID。好,接下来我们刷新看一看。是不是一样的,看这里有消息一消息二消息三,然后点击的时候下面也有对吧?好。那接下来我们再来考虑一个事情啊。下面展示的这个内容,哎,是我们组件里面写死的,就说我无论点哪一个消息,它都是显示这个内容,对不对啊,这不是我们想那个效果,我们想要的效果是说我点这个消息一,它给我显示这个消息一的ID,消息一的这个抬头,以及消息一的一个内容,对不对,那我点消息二,它给我显示这个消息二。啊,然后点消息三前进消息三啊,这个时候。我们就需要考虑一个事情。就是说我这里点了什么,哎,这个组件怎么会知道我点了什么,所以我要把一些数据传给这个组件,让这个组件哎去进行数据的一个过滤,那比如我传一个ID,那我点了这个ID为这个001的,那你就给我展ID为001的一个数据,我点了这个ID哎为002的,我把这个ID002给这个组件,那这个组件就给我展示ID为002的一个数据,对不对?好。
14:11
这个才是我们想要的效果啊,那首先我们先做一些前期的准备,既然我们点了哪一个消息,这个里面就要展示对应的消息的一个数据,所以说这里面我们要提前先准备好这个数据啊。来,先回到这个组件。就是详情这个组件我在这里面啊去定义一下,我们提前要准备好这些数据,当然如果是呃。正常的一个项目的话,那这里肯定是,比如说我点了这个消息二,我这边给到组件一个ID是002是吧,那要通过这个ID002去发送这个啊加请求啊,去获取服务端一个数据对不对,那这里我们先把这个数据给给写死啊,比如说。啊。好,这里也定一个message,定义一个数组。这里面我就放一个一个的message ID来,001。
15:01
001,那这里我只要放一个content就可以了啊。这个谁比如说。来,我是消息一好,来,接着多复制几条。把它改成二。三。三。这个数据我们先提前准备好啊。这时候当我去点击了哎,不同的这个链接之后,我们传一个ID给这个组件,然后这个组件里面去根据我传入的ID去拿对应的数据就可以了,是不是这样的,那接下来就要考虑问题,我们怎么把这个ID来传给这个组件,其实大家想一想啊。之前我们在写项目的时候,哎,比如我们写一篇文章的一个列表,那这是文章的一个链接,我们如果想点击这个链接去查看文章的详情啊,一般会把这个文章的这个I附到这个链接的后面,然后在详情页去拿到这个ID去展示文章详情,对吧?啊,所以我们这里也可以把我们的这个ID附到这个链接的后面。
16:03
那我先把这个结构给整理一下,因为这个有点太长了是吧。啊,一直到这里到这里把它给剪切,然后加上一个括号,因为加上括号之后呢,我就可以去,呃,换行去折叠它。来,在这里写一下。这是一个P标签。行,那这个我也给折叠换一下,行,哎,这样的话方便大家能整个去看到啊好接着说刚才的问题,我们要把这个。啊,ID给附到这个链接后面去。同样是附到这个链接,后面也有几种方式啊,那这节课我们先说第一种。啊,直接以这种斜杠加上这种ID的形式,哎,比如说这样写一个零一,那这种形式的,呃,传递这个参数呢,我们一般称为啊先写的啊,一般称为apartments穿餐对吧?啊。嗯,这里稍微给大家回顾一下,之前我们在比如说学习这个阿的时候,去传递这个参数,就像服务端去传递我们的请求参数,是不是有这么几种方式,一个是query对吧,Query衬参那种就是说以问号的形式对吧。
17:12
然后问号这个。Di等于什么什么这种形式对不对,这个快餐好,然后。啊,这里换一下行,因为这个是写的一个临时的代码,等会把这些都删掉啊。还有一种是什什么方式,是不是使用,哎,这个apartment穿插,那permit船舱呢,有点类似于。这种形式。哎,就是我们把这个ID呢啊,或者说要传递的数据在这个斜杠后面啊,给它传上,比如说ID001这种形式,那还有一种是使用的什么方式呢。啊,这里给它缩进一下,还有一种使用这个啊,包底衬衫一般都用于我们发送这种表单的一个请求啊,提交一个表单数据都用于这个啊。Body体的一个,诶穿餐,那body呢,它其实又分两种,一种是这个,呃,URL啊,In code,还有一种是。
18:06
这个杰森这几种方式。其实呃,那这两种呢,都是比较适合刚才我说的情况,我们在这个链接后面去附上我们要传的这个数据,对吧,那这节课我们先说一种这个啊。哎,就是说这种apartment。也就是说,我们要把这个ID附到这里,当然你这里肯定不能写死。我们要随着我们数据的这个便利,哎,真正的去用到每一个数据的这个ID来。在这里你要写成什么啊,message.id因为这个是什么,它是这个GS差的一个语法,所以啊,这里面我们如果要想写这个变量的话,哎,这里面就。不能用这个。双括号啊,不能用双引号了,用这个画括号。然后画括号,那这里面我们就可以写这个。表达式啊,我们写个哎,转移字符上,这个时候可以直接把这整个。这个给剪切过来,那后面的这个001我们就不要了,那这个就可以删掉了,剪切过来之后,这边是斜杠,后面要跟上我们这个ID对不对?好。
19:08
呃,因为我们用的这个转移字符,所以可以直接使用啊dota去把它的这个ID给写上对吧?点ID啊,你如果用的是单引号或者双引号的话,你还要用这个加号去连接这个ID,是不是我们直接用这种转移字符比较方便啊。好,这个ID带过来之后。诶,我们来想一个问题啊,也就是说我们后面是附加了这个ID啊,先看看效果啊来刷新。来看一下我,你可以看一下这个左下角啊,显示的是不是有个001002003,但是你你不管怎么点它后面是带了这个001,你点它后面是带了这个002003,但是我们知道之前我们在讲这个模糊匹配的时候,我们说过对吧,它路由我们注册路由它匹配到这里。而后面我们写的这些内容,他都是给忽略了,他不管他对不对,他不要的。是不是之前我们在讲这个模糊匹配的时候说过这个问题啊,它匹配到他需要的以后,他后面的都不管了,所以这个ID的话,我们是啊,你这边编写啊,这个路由链接虽然是写上这个ID了啊,但是这里在匹配啊,注册路由的时候,它匹配到之后,后面的这些就不要了。
20:16
对吧,那怎么办,这时候。你要去,哎,声明你需要这个参数,那怎么办?斜杠啊冒号加上这个ID,声明你需要这个参数,嗯,如果我们啊写过比如说用过这个kava,用过这个plus等等后端的一些框架的话。大家是应该见到过这种去啊,注册这个路由的时候,诶,见过这种方式去绑定这个参数的啊,绑定这个路由参数的啊。这样的话,我们就可以把这个啊ID给。接收了啊,那我们来想一想,这个是,呃,有点类似于是这个组件的一个父组件对不对,那这个组件要向这个子组件去传递这个数据,你想想子组件它靠什么接收,是不是purpose对吧?我们去这个子组件里面,我们打一打,你看看这个purpose,它的这个purpose有没有拿到我们传的这个ID来。
21:04
进到这个组件里面啊,我们在这个render这里面。this.purpose然后点log,我们输出一下啊。保存。来打开这里啊。然后打开。好,我从头开始请求啊。好,这个现在是没有任何输出的,因为这个组件还没有挂载呢,是不是,哎,我们的这个消息组件还没挂载呢,诶即使到这还没有呢,到这还没有挂载呢,因为我们是在哪打印的,在这个呃,Details这个组件去输出的,对不对,那只有我点了它之后,这个details组件它去渲染来点击看一下啊,这个就是我们输出的这个purposes,找一找,看看有没有这个ID来点开。看一下啊,诶,你会发现在这个location克逊里面,这个pass内,这里面给我们带来这带这个001是不是啊,但是你是看到它了,但是你如果你要用它的话,你干什么,你还要用正则匹配,你去把它拿出来吗?是不是比较麻烦,你接着去点开什么呢?点开这个match,你会发现,诶这里面P它已经把这个ID给我们收集到这里了。
22:05
是不是这样的啊,是不是这个ID我们就可以直接用了,对吧,好。这样我们通过这种形式就把这个ID给传到了这个子组件里面,那通过这个啊,这个ID再去在这个子组件里面去匹配这个数据啊,匹配这个数据就能拿到对应的这个内容,是不是,但是我们还少了一个字段title是吧?啊title呢,其实呃,在这个里面,我们这里面是不是已经定义过title了,那你既然ID能传过去,Title是不是也可以传过去。是不是来我这里再换一下行,因为太长了啊。在这里换一下啊。好,那既然这个ID能带过去,我这里title,我是不是可以再加上一个title。Message。OG第2TITLE,好,这里你要去传这个title,同样的你要在这个注册路由的时候,你要声明我需要这个title,哎,注意啊,这个我们注册的字段就呃是我们在这个。
23:04
子路由组件里面,哎,拿到的这个这个K啊,这是value value是我们斜杠后面传的那个值,那这个K呢,就是我们这里去。哎,就是说我们这里去定义的这个这个值啊。这个title已经有了,接下来我们来点一点啊,现在点消息一来看他这个输出,找到这个match。Hers是不是有抬头了?好。这个就是我们如何向这个哎,路由组件,向子路由组件去传递这个参数啊,我们把这个注释给大家去补充一下啊。这里,哎,我们是在什么,在干什么,在向。
24:00
这个组件传递参数啊,像。组件啊传递。参数。这里是在干什么?这里是在,我再换一行啊。嗯,写到这一行吧,注册路由。然后。声明。接收。啊。参数,哎,声明的时候,以这种斜杠冒号的时候,冒号的形式来去申声明,只有我们这边传递了,并且你这里声明了,才真正的能在这个子组员里面去接收到我们传递这个数据,如果你只是传递了,但是你这里不声明,他会把后面所有的这个这个传到我们数据都给忽略掉,哎之前讲这个模糊皮肤的时候所有的问题。啊,这个就是家补一下,接下来的事情就比较简单了,我这里既然能从他这里面拿到这个ID,拿到这个title对吧?啊,那我就呃用ID去这个数字里面去匹配我需要的数据就可以了,是不是好来接着写一下啊,首先我把我需要的这个数据啊结构出来,我需要谁需要一个ID,需要一个啊title。
25:16
等于啊,从哪结构呢?从this purpose.match。点二他,哎,从这个里面去拿,因为这个这两个我们传递的数据是在谁呢?你看一下浏览器是在这个啊麦起是吧,Purpose里面的这个麦起里面的performances里面是不是。接着写啊。这里拿到这个title之后,那这个title是不是就可以直接展示了,对不对。但是这个content啊,当然这个ID也可以直接展示了,对吧,但是这个content我们是不是得先用ID去这个数组里面去匹配出来我们需要的一个数据,在哪去获取这个content来去查找这个数据啊。我们先嗯需获取到我们需要的这个数据吧,啊啊date等于谁呢?等于这个message.find进行一个呃查找查找谁呢。
26:09
他呃,其实这个每一个项目的话,就是一个message。啊,不笔记。就是说它也是一个迭代的一个过程,那在迭代的这个过程中,我们可以筛选出来符合我们条件的数据,那我们要什么条件,就是你迭代的啊,便利的这一条一条的这个数据,它的这个ID。等等于谁等等于我传过来的这个ID的时候,这条数据才是符合我需求的,对吧?好,我把这个变量换一换啊,这是我们需求的,需要的这个数据好。它就是经过筛选后,我们得到的这个某一条数据,那之后它的这个content在这啊。是不是就是我们的这条数据的content?哎,筛选过后的这条数据的这个content来看一看效果啊,保存一下,等它编译完我们去浏览器中刷新啊。好,其实下面已经有了是吧?啊,那我接着点那个消息二,是不是消息二的002的啊,然后点那个三,然后这里你看ID变成三,这里变成三,然后这个内容是我们匹配出来的一个内容。
27:10
啊,这个例子就写完了,哎,主要的使用是这个,使用的是这个apartments啊。传参的一个方式啊,当然后面还有几种传参的方式,比如说呃,这个快乐传参呀,还有呃其他的一个传参,我们在后面的小节中再去讲。我们把这个呃注释给写一写,首先啊,这一个注释啊。PAR传递的。参数,哎,可以。在这个。Purpose啊中获取到,哎,至于是哪个里面,你自己去展开,你看一看就知道啊,是在这个里面可以获取到啊。那这个就是说,嗯,使用。传递过来的ID。
28:00
匹配。哎,符合需求的数据。啊,因为这里是我们模拟的这个数据啊,所以要去这里面去啊,便利去匹配,如果是呃,正常的一个项目的话,我们应该是拿这个ID去请求这个服务器啊,获取这条ID为它的这条数据的一个详情啊。好,那这节课先讲到这里。
我来说两句