00:00
好了,各位,上一小节呢,我们学习了如何向路由组件传递PAR参数,好,给大家写好笔记了。首先你想传递department参数,就得要求你在编写路由链接的时候就得携带好参数,哎,那在这直接拼名字,Tom,年龄18岁,不是说你携带了就行的,你得在注册路由的时候声明接收,对吗?声明一下我要接东西了,如果你不声明,人家认为你传这些东西都是多余的,诶,传好了,这叫name,这呢叫做age,声明完了之后呢,你就可以真正的去接收参数了,那怎么接呢?这么写,this.pro.match.promise那在这呢,拿的不就是name还有谁呀?咱们刚才声明的这个age对吧?我这是写了一个通用性的案例,并没有把我在课堂上写的这个直接拿过来,你就比如说在这儿啊,用模板字符串,用message OB message。
01:00
BG你直接看笔记,你知道那是个啥呀,对吧?哎,所以说写了一个通用性的好了,折叠起来啊,脚手加停掉固定的套路,SRCCTRCCTRLV来重命名走,这叫16_src下划线,那这叫做向路由组件传递P参数啊,传递向路由组件传递参数啊,其实这P呢,应该小写啊,PAR好说,我说怎么把它记住呢,同学,因为你读取这个参数的时候,你看这this.pro点,你最终是不是落在了PAR上啊,所以说它叫做PAR参数,而且你这的写法是不是咱刚才说像极了adjust里边的PAR,所以说综上所述,它就叫做PAR参数,好了,我们学习另外一种啊,那另外一种呢,我们打开src找到配。
02:00
It找到home下的message,找到message组件,那么第二种传递参数的方式呢,叫做传递search参数,哎,回到这儿,我先把这个给大家补上,刚才讲的是第一种方式,叫做PAR参数,接下来传递的是search参数,Search参数呢,相对来说啊,能比PAR传递的时候能够省心一点,但是接收的时候呢,麻烦一点,来我们操练起来,关掉,回到message组件来,走起,刚才这种写法是传递PAR参数,那现在咱传递的不是参数了,是什么呢?是search参数,那我是这样设计的啊,同学,我不想把这些东西都删掉,虽然我已经复制了一下这个代码,但是一会儿呢,我们想来一个总结,所以说这儿留下来啊,走走,再敲个回车,写好注释,把这句话直接拿过来向路由组件传递。
03:00
Search参数好,那怎么写呢,来。还是这句话拿过来,只不过呀,不通过这种形式写了啊,删掉老师,那怎么写呢?瞧着啊,这块肯定得是message OB bg.title对不对啊,看啊,同学你是不是想传ID和title,那就这么写,问号ID等于来读出来是Dollar符,划括号,然后是message o bg.id还想传啥是不是title?用and符,Title等于Dollar符画括号message OB BG点谁呀title同学,我这看起来吧,哎,因为咱们读了动态的东西,所以说看起来就,哎呀有点乱是吧?同学把这翻译一下,比如说我点的是消息一,那你告诉我这其实就是问号ID等于零,一,然后and符,我这画笔呢,无法去敲and符,所以说我给你画一个and的符。
04:07
哎,你看还挺像的是吧,但是位置有点不太对啊,来走,And伏ID等于01AND伏title等于啊消息一,我这画笔呢,敲不了中文,那所以说我就是消息啊叉叉消息一同学你觉得这像什么呢?是不是有点像咱们当时在学习adjust的时候,你所携带的query参数啊,对吧?但是它不叫query,它叫search,哎,你心里边得明白,其实这种携带参数的形式特别像我们adjust里的query参数,它不叫query,它叫search,那你知道为什么叫search吗?马上你就知道了,哎,马上你就知道了,别急,同学,像路由组件传递search参数,你就得这么传,那你这么传search参数,那就意味着同学你看这都是匹配的,想带PAR参数吗?想那就这么传,那就这么声明接收,那就哎像刚才那种写法,真正去把它取出来对不对?那现在换了我想传递的是search参数,那你就得有一个的声明方式,就得有一个的取出方式,也就是无论哪一种像路由组件传参,你都不可避免这三个环节,怎么带,怎么声明,怎么具体去接受,对不对?好嘞,来回到代码当中,我已经确定了,就是这么传,那怎么声明接收呢?那你看好了,我把这个注掉,回车,写好注释。
05:40
说老师你肯定给我讲这个呀,叫声明接收search参数是吧?哎,老师我就等着你写呢,我看看这个search参数到底怎么声明接收呢?啊,那我写完之后呢,你可能就觉得挺爽的,因为啊,Search参数无需声明接收啥意思?Search参数无需声明接收,也就是说你要传递PAR参数,是不是传了,嗯,那这就得声明,但是如果是search参数,由于有这个关键的东西存在,就是问号,所以说你根本无需声明接收,正常注册路由即可,我问一下同学这是不是正常注册路由,你这路径我就给你这组件是不是正常注册呢?补一句正常注册路由即可,好了,那我传了,那你还告诉我无需声明接收,那等我拒。
06:40
取的时候到detail组件,我怎么真正把它取出来呢?是吧,来来来,同学,这叫接收PAR参数,我给你写在后方吧,行吧,同学,哎,这叫接收PAR参数,但这行我不用,我得注掉,但是查找这个动作肯定是要有的,对不对?哎,我得拿到这个ID,那问题是怎么拿呢?删掉删掉,刚才这个肯定用不了了,那接下来我写一段代码,就是告诉大家如何接住你传的40参数,这还是放上边吧,是吧?哎,因为前边这两个注释呢,你看都是上边是注释,下边是代码,那这我们保持这个结构对吧,上边是注释,下边是代码。好了,走起同学,写好,叫做接收什么参数,Search参数。
07:24
把PAR改成search来吧,走起老师,那怎么接呢?我先不写,让你自己观察,同学不管怎么接,是不是都在这人里呢?是不是都在props里呢?来吧,咱瞧瞧啊,启动一下脚手架,N PM start,走稍等,就很多东西啊,你可以不用说马上就把它记住,你可以猜一下嘛,是吧,后台开好之前的关掉啊,刚才说什么了啊,他说ID is not DeFined啥情况啊?同学说你detail啊,这个组件里的结构里的第19行,23行啊同学咋回事呢?是不是还没接到ID呢?刚才你ID是么?这么哎,接收的你的title是不是拿出来了,你看有ID有title,那你看这就不行呗,那所以说咱这样同学我先不查找行吧,我先不找。
08:14
老师,那你这写什么呢?我这随便写点问号对吧,那我这也哎问号,哎,那我这儿呢,同样的道理呗,我不查找了,我写假的,那还不好写吗?对吧,保存回头想一下效果能运行哈,我们的关注点就是当你点了某一个消息的时候,主要看看这个detail详情组件到底输出了哪些pro。Home message我点了啊,消息一走起来,同学注意观察控制台上的输出,瞪大你的眼睛看同学,你说上哪能找到我所传的这个ID title呢?你看在地址栏里边是不是有所体现,是不是在这呢?哎,好,来哪呢?行不让大家猜了在这儿呢?this.pro点是指这个对象,继续点location,继续点,这里边有一个search就在这了。
09:02
就在这呢,Search,哎呀说老师search,但是我觉得它不好,老师刚才我在接受这个是吧,P参数的时候,我发现人家自动啊帮我整理成一个对象了,对吧,那这怎么老师这没帮我整理啊,我就就自己就就那直接拿个字符串啊老师那我这同学他就没有帮你整理,所以说search参数需要你自己把这种形式变成哪种形式呢。同学,这属于K等于Y6AND f k等于Y6这种形式,最终同学们,你说我们是不是希望变成这种形式,一个对象完了,ID。然后走零一啊,逗号ti啊,抬头,然后变成什么呢?哎,是那个什么消息一,对吧?同学,我不想要这字符串,我想把这字符串加工成这个样子,对吗?那咋办呀?同学,你自己其实可以做这件事,以按符做分隔,分隔完的东西去除第一位的问号,然后这个ID作为key,这个零一作为value title头作为key,消息一作为value是不是可以?但是啊,同学,不用你自己写,有一个库专门能做这件事儿,这库是什么呢?哎,回到代码当中,隆重的给大家推出一个库,同学你不用记,我会给你形成笔记的import引入。
10:29
这个库的名字叫什么呢?我先随便写个叉叉叉from说,老师,这库你不得下载吗?不下载你咋引入啊?这个库react脚手架已经帮你下载好了,这个库的名字叫做query string。我们引入这个库的时候,一般简称它为QS。这个QS身上啊,同学你注意它有两个特别有用的方法。哪方法呢,看着啊同学,你比如说我有一个对象啊,它里边呢是name姆Tom这个年龄啊,是18岁,我想把这个东西变成这种形式,Name等于Tom and福age等于18,同学我想问一下,就这种编码形式啊,就这种K等于Y6AND负K等于Y6,这叫什么编码形式?
11:26
如果你知道那更好了,你不知道把它记一下这种编码形式啊,同学,多组KY6用等号哎去表达K和Y6多组k value6之间用on的辅作分格,同学,这种编码形式叫做URL in code的编码。把它记住。哎,对象我想转成URL in cody的,你就可以借助QS生成的一个方法叫做QS点。同学跟你Jason身上那个方法一样,一个叫string,返一个叫pass,先用stringfi o BJ,它有结果输出,这结果走,注意观察控制台上的输出刷新同学来注意看是不是变成了name等于Tom and符H等于18 OK,不好,所以说Qs.string范是把一个对象转成URL encode的编码格式,那么如果我有一个字符串呢,这个字符串呢,比如说表达的是一个车的信息啊,写好了,你比如说car name,车的名字啊,等于奔驰,然后呢,And福pricece,车的价格等于比如199,那你说接下来我想把这种URL in cody的编码的字符串转成对象,我得怎么办呀?QS身上另外一个叫做pass,你把你的str传进去,保存控制台,看输出刷新来同学car name,奔驰。
12:55
199对吧?哎,那所以说同学你知道了QS用法之后呢?嗯,那你就可以接下来操作了,我这先删掉,一会儿给你形成笔记,好吧,同学来告诉我怎么取出search参数怎么取,你先取出来怎么取啊,This star pro.a撤回来撤回,撤回来走点谁location吧,你看这吗?this.prop.location点是不是search来取出这个search,但是这个search我不能直接用,我不喜欢这种字符串的形式,那我得怎么办呢?是不是得是Q s.pass解析把谁丢进去search?
13:36
对吧?啊,那这样的话我问你同学Q s.pass解析之后出来的是不是一个对象,那这个对象我是不是可以解构赋值呢?我从这里面拿到什么呢?一个是ID,一个是title,但是我慢点来,我先不解构赋值,同学result行吧,结果然后我consolo这个result,咱就瞧瞧呗,回到页面刷新看输出,你看ID为零一,Title为消息一,但是有点小问题,问号是不带着呢,想办法把问号干掉,方法有很多,说一个简单的search.slice截取一下写个一是不就得了呢?回到页面刷新看效果,ID01 title头消息一。所以说同学来吧,这是不是可以直接解构赋值,拿谁ID还有谁是不是抬头ID握手里了吧?抬头握手里了吧?能不能查找呀?能是不是AID吗?那这会就能写了呀,啊来撤回来。
14:36
把它选中走这是什么呢?ID,那这呢,同学你选中这个,然后你摁一下花括号,左边那个括号,它就自动把你圈起来了啊这里边写谁呢?是不是抬头啊走那这呢。那你查找都有查找的结果了嘛,那所以说find result,诶放在这儿里边,Find result点啥呀,是不是content呀,这不就搞定了吗?来回头瞧一下效果点二就2.393.191,对吧,东西都在哪呢?location.search同学,那你知道为什么它叫search参数吗?因为最终它落到了search的身上,所以说就叫做search参数了,你当然也可以称之为query参数,因为这种形式它就是query的那种形式是吧,但是不太标准,一般我们称之为search参数,OK啊。
15:28
啊,大家呢,可以练习一下这种方式,来我们捋顺一下,哎,同学,如果你想传递search参数,那你得怎么写路由链接呀,这么写,通过问号K等于Y6AND负K等于Y6的形式把search参数带过去。search参数一大特点,无需声明接收,不用声明接收,正常注册路由即可,就是取出来的时候稍微有点麻烦是吧?得怎么取呀?this.prop.location.search而且不能直接用,还得截取掉那个问号,还得转成对象,然后才能用是吧?先别纠结说老师哪个用的多呀啊,他们这个利弊都在哪呢?别着急,先把这设置的方式学好了,一会儿我们进行总结,OK,那这一小节呢,我们停一下。
我来说两句