00:00
上节课我们说了如何传递这个search参数啊,啊,这里。整理好了笔记,来一起看一下。往下拉一点啊。好,我先把这个里面的啊,这个给删掉。因为等会还要去复制啊,好像路由组件传递这个色计参数。同样的,首先我们得携带参数,那传递这个设计参数,我们携带参数的方式是这种问号的形式啊,有点类似于我们之前的这个query参参啊,其实就是query参参对吧?诶在注册路由的时候呢,无需注,无需声明,直接正常的注册就可以,哎,那接收参数的时候呢,这个就比较特殊的,我们是从这个purpose location点里面去接收到这个参数,但是需要注意的是,我们获取到这个参数,它是啊UR in code的编码后的一个字符串,如果我们想要去使用,要借助于这个工具,把它给转换成这个对象,才能让我们更方便的去使用啊,这个是色计参数啊。好,来这一小节,我们学习什么呢?学习。来。
01:01
向路由组件传递。TE参数啊,TE参数。注意啊,这个state它不是我们组建的这个,它是路由组件的这个,不是我们之前写这个啊,React组件的时候,那个组件本身的这个,而是路由的这个啊。这个一定要分清楚啊,我们复制一份,把这个给折叠粘贴一下啊。改成11。看一下怎么向路由组件传递这个参数。在这里我们先进入到11这个项目,先把这个结束了啊,CD到上一级目录11TAB,然后去安装这个依赖,先让他去安装的,我们不用管它。接着去看一下我们的这个代码,诶,找到。About里面。Message,哎,这里面我们。
02:02
传递这个路由参数的这个地方啊。来这里还是一样啊,先注释。注释完以后,诶复制一份这个给大家去写另外一个。这节课要讲的一个例子啊,啊,这个就不要解开。传递什么传递?State参数好,同样的,哎,这里也注释一下。我们先传递啊,再看看怎么接收,那这里先复制一个先放着,先把这个呃注释都改一改。State参数。好。看一下啊,向这个组件传递这个state参数啊,再次强调这个state它不是组件自身的那个的那个状态,而是这个路由啊,组件这个它的维护的这个啊。我们来先来看一看,之前我们传这个参数,哎,都是传的这个字符串形式对不对啊,我们哪怕说把这个都删了,我们一开始原始的时候是不是传的啊,About下面的什么message等等等等都是字符串的形式啊,不管我们哎传这个apartment参数啊,或者是这个设计参数都是传的是字符串,但是这个C的参数它就比较特别,它要传的什么,传的是一个对象啊,注意啊,那传的一个对象我写一个单括号,注意。
03:16
这个大括号它不是对象的大括号,这个大括号只是说明我们要在这个GS叉语法里面要写表达式了,对不对?好在这个里面我们再定义个大括号,这个才是一个对象。清楚了吧?既然是一个对象的形式,那么我们要传什么参数,我们想一想你去,哎,呃,定义一个这种路由链接都需要什么,是不是需要路由的这个路径名,还有这个我们要传这个参数,哎,对,我们也是要传这两个啊,属性写这两个属性。Pass,我们要。设置的这个路由的这个路径啊。还是一样啊,上面这些我直接复制,复制到这里。因为这个参数呢,我们就不用了啊,因为我们这个参数要使用。
04:01
这个啊进行传递,好,这是第一个参数。第二个参数,哎就很明显了,那肯定是传我们的state参数对吧?啊,那这个属性是state,诶,因为参数我们可以传多个是吧,所以它又是一个对象,比如我们要传这个ID,哎,等于什么,那ID呢,就是直接从它这里面去获取这个ID,接着逗号我们再传一个开头。哎,开头呢,也是直接从这里面去获取的。这时候啊,我们就是把这个死机的参数去传到这个路由里面,那既然我们这边传递了这个参数,这边是不是还要接收对吧。接收这个C的传接参数和search参数是一样的啊,不用声明直接去接收就可以了,但是直接去接收之后,我们要去这个组件里面,我们看一看它在哪里面可以获取到,好吧,好,那这个我们就先注释掉。哎。然后呃,上面这个因为没有引入了,也先注释掉。
05:03
因为我想整个把这个都保留下,好给大家做一个对比三种来传递参数的一个形式啊,那这里我们去复制一下这个啊。好。传递参数,哎,可以在什么中获取到呢?这个我们先不知道啊,不知道先先空下。接下来啊,因为下面会用到这个ID以及这个title,我先啊写两个临时的一个数据啊,ID等于。001咱们去拿第一条,然后是let title啊,等于。消息一好,先这样啊,要不然下面会呃报错,接下来那既然我们是参数是传到了这个组件里面啊,你不用想,肯定是在这个purpose里面对吧?所以我们在这个purpose面啊,打一下这个purpose,在这个组件里面打一下这个purpose,看一看它到底藏在哪里。来保存。重新请求一下啊,啊,还没有启动。
06:02
打开终端啊,我们之前是刚安装了这个啊,没有启动。Tu。等它慢慢启动。启动完成之后,我们来找一找,看一下这个purpose里面哪个属性会有我们传递的这个参数啊,这些先清掉,点about message,接着我要点了啊。诶,那去这里面来看一下。嗯,把这个展开,因为这里面之前大家如果留意的话,这个时间是按底范的,对不对,但现在它是一个对象了,那我们把它展开看一看。这个里面到底是什么,是不是我们传递的这个死机的参数,诶,它给我们放到了这里面对吧,而且是一个对象对不对?嗯,也不是说他帮我们整理的这个对象,实际上我们这里传的时候,是不是传的就是一个对象啊,传的这个参数是不是就是一个对象。那这就。比较明显了,它是在哪里面,在这个purpose location第二。
07:01
里面可以获取到这个传递的参数,并且它直接是一个对象,所以我们可以直接去使用,对不对?来这两个我们就不要了啊,那同样的还是直接let。哎,结构从哪结构呢?从this.prop从这个里面去解构,来获取到这个ID和title,来看看效果啊。好,零一消息一点这个202消息203消息三,哎是可以的是吧?好,接下来我们来思考一个问题啊,思考一个什么问题。之前我们在。使用这个P传参啊,是把参数附到了这个链接的后面,哎,后来我们使用这个设计传参,所以我们参数还是在这个链接的这个后面啊,这个路径的这个后面对不对,那时候我们不管怎么去刷新浏览器。它都是可以维护住的,对吧,因为我的这个参数在这个它的这个后面,哎,所以我不管怎么去刷新这个浏览器,还是这样的一个地址,因为参数还一直在这,所以我的参数不会丢失,可以正常的一个使用,对吧,但是现在注意了啊,现在我使用的是谁,现在我使用的是这个。
08:09
啊,State传递的这个参数,那么我去刷新这个页面的时候,这个地址栏里面它并没有体现出来,我要传递这个参数,这时候我去刷新这个页面,大家想一想,这些数据还在不在,就是我的这个参数还能不能传递,哎,就是哎,这里面的我这个参数还能不能传递。好,接下来我来刷新啊,现在是002对不对,这里也展示零二,接下来看好了我来刷新。诶可以看到啊,这里并没有变,而且你去这里面去看的话。来,去这里面去看是不是零二还在那,它并没有在地址栏中去来展示我们传递的参数,它为什么还在呢?来我们来看一下啊,从这个哪开始看,从这个app.gs这里面开始看,你看一下我们使用的是谁,使用的是不是这个啊,从这个index里面开始看,我们使用的是谁,是不是布block,是不是这个路由器,这个路由器之前我们说过他一直在维护谁,是不是在维护这个黑色,维护这个历史记录啊,也就是说。
09:05
啊,虽然我们传的这些个TE啊,TE参数并没有在地址里面去体现,但实际上它在历史记录里面都是有体现的。清楚了吧,好,那我现在来,比如说我复制这个地址,那即使我新开一个标签。我去打开来看看是不是就不行了。是不是就会报错了啊,但是我在这个里面,我去。刷新就没有问题,看到了吗?因为这个里面,哎,就是我当前的这次请求里面,他一直给我维护着这个历史记录呢,所以可以从这个历史记录里面看,不管我怎么前进后退,都是可以拿到它维护的,我们传递的这个state这个参数,对吧?但是我们新开一个标签页就不行,他报错会找不到是不是好,如果这样不明显的话啊,你也可以清了这个历史记录,重新试一下,或者说你打开一个这个无痕的一个窗口,哎,无痕那个窗口相当于是现在没有没有任何记录了,对吧,没有任何帮你缓存任何数据,那么这时候你打开它还是一样报错的对不对,因为都没有历史记录了嘛啊。
10:02
但是如果你去从开始,从这里面开始,一步一步的去点过去,这时候是有历史记录存在的啊,他帮我们维护了这个历史记录,这时候你再怎么刷新,它还是有的。清楚了吧,这也是啊,为什么?我们传的这个参数并没有在地址里面体现,但是我们刷新的话,它依然还在。清楚了吧,啊,那这是一点要注意的一个地方,好。把这个关了啊。接下来我们把这个呃笔记给大家稍微整理一下啊,那直接去复制一下啊。向路由组件。那这个就不要了啊,传递这个C的参数。路由链接啊,携带参数,这个携带参数呢,就不是直接定义到啊这个地址里面了,而是什么呢?而是它整个就是一个对象对吧,那对象呢。注意啊,最外层的这个大括号是我们GS差要求的,哎,我们要在这里面写这个GGS这个表达式,所以外面要套一个这个大括号,对吧,我们要传对象,所以在这里面你要再定一个这个大括号,定义这个对象,那先传什么呢?Pass内诶,指定我们点这个链接,它要跳转的一个路径啊,那比如我们还是就写DEMO吧。
11:13
第二个哎,这个参数啊,这个属性吧,就是我们要传递的一个。State参数,那比如我们传ID啊001,哎,再传一个title啊传传一个消息一好,那是这是路由链接,我们携带这个参数,使用这种形式,哎,注册路由它和这个search啊是一样的啊,是直接就是注册就无需呃声明啊,直接就是正常的注册就可以啊,就这么就可以啊。接收参数呢,这个又不一样了,它是从这个location里面的。哎,State里面去接收啊,注意它直接就是一个呃对象,所以我们把这个前面也给补上吧,可以直接去结构去使用啊,ID title,然后等于从这个this purpose里面啊,Location里面去结构出来,我们传的space参数啊,它也有一些呃需要注意的一个地方,那需要注意的地方呢,就是说嗯。
12:06
刷新。刷新页面啊。来传递的参数。还是?可以正常传递的对吧,正常传递的传递的啊,注意这里是说了啊,强调两个字是刷新,我给大家把这个标注啊刷新,你如果说你复制的这个地址啊,你复制的这个地址,你新打开一个页,你去打开那肯定是不行的,因为你新开的这个标签页,它现在并没有去给你维护这整个历史记录,对不对。啊,注意啊,这个是刷新,只有刷新的时候才可以啊。啊,这是我们这个state要注意的一个地方啊,那其实呃,这个讲完之后,常用的我们这个三种传递参数的方式也给大家说完了啊,他们并没有说啊,就是说。谁会经常用到,谁不经常用,都是会经常用到的啊,只不过我们根据我们的业务场景,我们所使用的这个场景不同,去选择最适合使用的一种方式啊,所以这三种大家都要掌握啊,然后有很多啊,他们这个不同的这个传递的方式之间呢,有一些相同的地方,也有一些不同的地方啊,还有一些需要注意的一些细节,嗯,但是大家一定要呃,记得一个规则就可以了,就是说你传递参数。
13:20
就要经历这么三三步对吧,你要在链接里面携带参数,然后在注册路由的时候,你要去呃声明这个参数,当然有的不用声明,你像那个他取消声明对吧。然后就是在我们要使用这个参数的地方去接收这个参数,就这么三步啊啊路由链接携带参数,那注册路由的时候去声明参数以及接收这个参数。啊,这个就是我们关于如何向路由链接啊,向路由里面去传递。这个参数所使用的三种方式啊,这里给大家都写到一起了,然后大家想看哪个时候直接去把注释给取消掉,去运行可以了,注意你要去尝试的话呢,你注意啊,是一对一对的,你这里解开了这个注释,你要去解开对应的啊,我们这里这个注释同时在使用这个。
14:09
参数的时候,你要要把对应的注释给解开才可以啊,当然你如果直接去看对应的这三个,嗯,一个一个的例子也行。好,那这节课就先说到这里。
我来说两句