00:00
好了各位,那在上一小节呢,我们讲的是向路由组件传递search参数,哎,把东西呢给大家整理好了,首先你想传递search参数,你就需要在路由链接里边这么携带参数问号K等于VALUE6啊,And符K等于VALUE6这种形式传递,那么在注册路由的时候,无需声明正常注册即可,原来咋写就咋写,那么接收的时候得是this.pro.location.search哎,就接到这个search啊,那我把这改一下吧,同学啊,我就这么写啊,直接给这删掉,在这this.prop.match.para就拿到了,那这呢,我也直接给他这么写,这不写结构赋值,让大家看的更清晰一点,this.prop.location.search哎,那值得注意的是呢,你获取到的search是一个URL in code编码的字符串,需要借助query string这个库进行解析。
01:00
B,好嘞,那么我们接下来写另外一个,那叫做传递什么参数呢?叫做参数同学,你注意这个state呀,不同于你组件里的那个state都叫state,但是这是属于路由组件身上所独有的一个属性state,千万不要跟组件的里边那个状态给它搞混了,OK,好,那么固定的套路脚手架停掉,每一个都留下痕迹,CTRLCCTRLV右键改名,这叫第17个下划线,Src下划线叫向路由组件传递search参数是吧?哎,刚才讲的好了,那接下来我们讲这个叫做state参数,同学你发没发现啊,无论是para参数还是search参数,你所传递的东西都暴露在地址栏上。PAR是这么暴露的,你能够明显的发现它有杠,比如说叫做Tom-18对吧,你如果传递的是search参数,其实也能够在地址栏里边观察到,你会发现它这么写的,问号内等于Tom对吧?然后and符我就用这个井号代替了,因为我这个画笔打不了and符啊,And符H等于18是不是能明显的观察出来,也就是说你带了什么东西,它都在地址栏里边暴露出来了,其实这个PAR参数啊,同学和search参数用的都挺多啊,这三个呢,你先先别急,其实开发的时候同学哪个用的都挺多,不是说老师我有一个侧重点,不是你都得会啊,我们再说这个state,这个state呢,就有一个优势,同学它不会把传递的东西在地址栏里边展示出来,在地址栏里边是隐藏的,你看不见任何的东西,好,那我们写一写啊,来,右键这些都关掉,回到src中,我先都折叠起来,SRRC下的。
02:57
Pages下的,Home下的,Message下的,来在这儿是吧?来开始传递东西了,来慢慢来啊,这会儿都收起来,这住掉了,那当然我就还得再来一行啊,那这一行叫做什么呢?回车敲一下啊,走,就像路由组件传递state参数,一再强调这个state跟组建那个state没有任何关系啊,那怎么传呢?瞧一下这的写法呢,就稍微复杂一点啊同学是这样的,我把这些呢全都删掉,你说像之前呢,Link里边直接那个to是不是写个字符串就得了,你比如说link-ABC啥意思,你点了我这个路由链接,我就让你去ABC是吧?哎,之前这个to啊,写的是不是一直都是字符串?
03:46
那同学,我跟你讲,如果你要传递state参数,要求你得把to写成一个对象。也就说这个to不再是字符串了,得是一个对象。啥叫对象啊?老师,这是对象,不,这个花括号仅仅代表你要写JS表达式了,兄弟,这叫对象对吗?好了,传递第一个passname就是你往哪去?
04:06
直接写往哪去,写到组件就结束,不要再写别的了,就写到这儿,你就是往home下的message下的detail去对不对?说我说那东西怎么带呢?别着急来一个逗号,既然是对象就能写多组KY6。是吧,叫state。I叫state,它是个对象,说吧,你想带啥,我想带ID,行,那就带值是啥呀?Message OBj.ID啊,OK,还想带啥title值呢?Message o bg.title啊,那你就带。哎,好,就这种形式,那传递4DATE参数,那么接下来你再想一下同学,那这块是不是也得考虑考虑啊,不能说你只考虑传递这一块吧,别的地方你就不考虑了吧,啊那肯定不行,来同学把这一堆呢都复制一下走改一个东西就行了。
05:02
State参数无需声明接收,正常注册即可解开,还是像之前这么写,说老师那说白了其实就是传递promise参数的时候是吧?这promise参数啊,不是promise promise,那只是传递promise参数的时候。我声明啊,对呀。别的时候都不用好哎。传就这么传,哎,注意这写的是对象啊,这是一组KY6,这又是一组KY6,这个state,哎,它是个对象,里边说吧,你想传啥ID是啥,Title是啥,对不对啊,这也无需声明,接收L正常注册即可,说老师,那来吧,回到detail组件,那可不摁住CTRL点击detail来了,同学,那你刚才这是干嘛呀,接收search参数,所以说助调对吧?那我这要是助掉的话,你觉不觉得QS我没用啊,那也助掉,要不一会儿它有警告啊,好了,那再往下你能猜到我要写什么了,就是接收什么参数啊。Search参数。走起search,好,慢慢来,这不能查找,因为还没有ID呢,这也不能写,对吧?问号抬头也没接过来呢,不知道写啥问号,ID都没有,怎么查找啊,问号主要就是看这,看看怎么能把我们带过来的消息信息接住呢?来,走起n PM start启动,等着它打开啊。
06:30
反正这三种传递参数的方式你都得会,没啥侧重点是吧,也没有什么说哪一种废弃了都在用啊,来控制台写到这刷新,点击home,点击message,点击消息一走,你这肯定是没有展示的,来打开这在哪呢?在这。输出的这个人是谁呀?this.props。this.pro.location点来了state帮你整理好成一个对象了,其实啊,同学不能说他帮你整理好了,应该说你当时传的时候,您是不是就写了一个对象啊,OK,这就是传递state参数,那你告诉我怎么写呢?这得改一下是吧,叫做state咋写来了?结构赋值从哪取呀?this.prop.location对吧?然后取出谁呢?
07:28
State就state,那然后你不还得继续取吗?那所以说直接一步到位,This点点location.state已经是一个对象了吧,来取出ID,取出抬头能不能找呀,能,那这儿能不能用ID啊,那这回就能了呗,走ID,那这儿呢,那就可以了呗,Title,那这就也能写了呀,Find result,点儿content,这不就结了吗?来看效果啊,点击一就一,点击二就二,点击三就三,对吧,同学,而且你注意哦,各位,嗯。
08:09
地址栏上是不没东西啊。OK。好同学呢,我想问大家一个问题,你说如果地址栏里边有东西,你是这么带消息一的,零一消息一同学你说就算我刷新页面,这些东西是不是也在那参数是不是正常能带过来?哎,这是帕参数啊,你说如果同学我传的是这种问号。啊,然后我开始写了,说ID等于零一,然后是and的福啊抬等于消息一,同学我要是这样传的话,是不是参数也在地址栏里有所体现,那就算你刷新的话,同学我问你是不是这些参数也依然起作用啊,哎,那你猜一下,同学,你说我现在这个date参数啊,没有在地址栏里边有所体现,那你说现在倒是好用,一就一,二就二,三就三,那你说我刷新一下能不能行呢?
09:13
刷新一下location,点这玩意儿,它丢不丢呢。是吧,理论上觉得好像得丢,因为我一刷新页面都是新的了,对不对,那这还没东西是吧?哎,那咱看一下啊同学,我现在这可没说目前这是三是吧,刚才我确实自己点的这是三,但是我这儿没有体现,你说刷新这丢不丢呢?我们看一下刷新。同学,丢吗?不丢,那咱说说他是怎么做到的啊,你不要以为地址栏里边没东西,一刷新,哎呀,那就一下子都回解放前了,他就不知道你刚才点啥了,他知道。看东西还在那说一下它怎么实现的呢?由于啊回到代码当中,我们现在所使用的是BRO,他一直在操作浏览器里边那个history,这个history呢,同学,浏览器有历史记录叫history,然后呢,它有一个API叫history,点儿什么什么什么什么东西,那你用browse ror的时候,其实它一直在维护这个东西,所以说你每一次往里边放东西,它是知道的,知道吗?同学,就你就算刷新的页面他也是知道的,因为知道他刚才你点的是三啊history,对象帮你记着这个东西呢,说老师那也没在history身上呀,这不在location身上的吗?那同学我再问你,咱们之前在分析路由组件和一般组件的时候,我想问你location和history history什么关系,History里边我问你。
10:54
是不是有location,哎,Location里边是不是有state,所以说同学怎么个情况,Location是history里的一个属性。
11:04
哎,你所传递的东西,人家都在history里边记着呢,哎,那我想问一下大家,我把这地址复制,我把浏览器的缓存我都给它清掉。什么历不历史记录的啥都没了,现在我打开,你说还能不能记着了呢?你说还能不能记得了呢?我们试试走,他能记得就见鬼了,为啥同学你缓存都清了,浏览器都关了,历史记录是不是都清了呀?所以他就不记得了,说老师,那为什么报错了呢?那你看啊,他说。不能够读取ID,在this.prop.location.state它作为unde的时候,同学你把历史记录都清了,那么this.prop.location.state这个state就变为de了,它就没有值了。啊,那你看你的代码写的,你在detail里边,你从and find上去拿这玩意儿,你觉得能拿得到吗?就拿不到了。
12:05
啊说老师那我得怎么办呀,很简单,咱这么写呀,或空对象啥意思呀,如果有值我就用你的值,没有值呢,我就写一个空对象,我从空对象里边结构赋值不报错吧,那顶多是ID是unde find title是unde find,你觉得呢?是吧?好了,保存,那我们回头看一下效果刷新走,但是还不行,他说怎么呢,不能读取content在unde上,这是什么情况呀?他说你index.js叉的第30行,回到代码来看30行咋了啊?他说这个东西是unde,不能在unde find读取content,为啥呀?嗨,因为你的ID是unde find,那你这么找,你找出来的结果这个find result,它当然是unde fund呀,他查无此人呢,对吧?那我们试一下consolo输出find result来这同学控制台上键我们刷新,然后呢,我稍微给大家放大一点,你瞧吗?
13:05
是吧,安find对吧,哎,所以说同学,那这咱得怎么处理呀。很简单,或空对象啥意思?哎,如果你查找出来的东西是有值的,那我就用你这个对象值,如果没有是under find,那就用空对象,我从空对象里点content,不犯毛病吧,哎,所以说这时候呢,你回来刷新啊来到这来来来来刷新走同学,怎么样啊,我稍微放大一点没问题吧?啊说老师,那我想看一下它location.state你瞧吗?你啥也没传嘛,那就是and find对不对?哎,同学回到笔记里边,你记不记得当年我在带着你去对比路由组件和非路由组件的时候来啊,一般组件的时候,你看location来,当年默认传的就是啥呀,Unde find说老师那这个state什么时候能有值呢?他等着你传呢,你这么写就是属于传,你传了它就有明白不?哎,所以说同学现在咱们就讲解完了,如何传递什么参数啊,State参数state的优点就是路径里边没有任何的提示,是偷偷的把东西传过去的,你点消息二,那就消息二,而且就算你刷新东西也不丢是吧?那之前那两个丢不丢呢?没试呢是吧?哎,咱试一下,住掉,来同学慢慢来啊,慢慢来,那这块呢,我给它注掉,好,我先测试谁呢?传递PAR参数,慢慢来啊,走回到detail里边。
14:44
是不是想传递PAR来这么传,那就得这么声明接收,那在detail里边就得把这句话解开对不对?PAR好回头看效果,点191,点292同学,你说是不是在路径里边有所体现,那你刷新它肯定也不丢是吧?好了,那这测试完了回到代码当中啊,这回呢,我不传P了,我传谁呢?我传search这么传。
15:07
那你就得这么注册路由,那你在这儿就得这么的,哎,去接收search,回头来到页面看效果啊,他说QS没有定义啊,那确实是,这是我给注掉是吧?打开回到页面看效果,整体刷新一下,点一就一,点二就二,点三就三,这是不是叫色试参数,OK,刷新走起走起走起是不是也没问题,好嘞,回嘞啊,那我把这个得注掉是吧?我把这一些也得注掉,我把这个得解开,毕竟现在我讲的是接收贝参数,那传呢就得这么传,注册呢,那就得这么注册,对吧。哎,好嘞,同学,那这样吧,既然都写到这儿了,那顺便把咱这笔记也给他完成一下吧,划到最后打开那s state的参数也讲解完了,来吧,同学们把这一堆全都复制过来,走起,那这怎么说如何携带呀?嗯,不能写to怎么怎么地了,那来,比如说就这个TOM18,我怎么带呢?首先必须你要保证的是to要写成一个对象,什么是对象啊,你得写成这种这种形式是吧?然后里边得是pass,路径是谁呢?就是这个路径啊,然后再来个逗号state走,然后是name冒号Tom,然后再来逗号age冒号18岁。
16:34
走哎,你就得这么携带,也是无需声明,直接这么写就行。那么怎么接呢?this.pro.location.state所以说同学千万不要把它和组件里的state搞混,人家是location身上的,对不对?那他有没有备注呢?嗯,有没有备注呢?有备注就是刷新也是可以用的啊,或者是这么说吧,说的官方一点啊,刷新也可以保留住参数,哎,刷新也没事儿,那这两个为啥我没单独说呢?兄弟,他在地址栏上有体现,那你觉得刷新是吧?地址栏都有体现,那你刷新地址它都里边都带着了,那肯定是能用的,这个为什么单独要说一句呢?因为他没有在地址栏上体现,你说对不对?
17:27
哎,好嘞,那这小节呢,我们停一下就讲解完了,传递啊stay参数,那顺带着我把这件事就也做了吧,脚手架停这是怎么着呀。关掉SRCCTRLCCTRLV右键改名这十几了呀,18_src,诶下划线,我这shift键呢,有点不太好用啊,来写上像这个路由键传递,我估计给大家录完这视频呢啊,我得换一下这个键盘了啊,叫做state参数好嘞,嗯,这一小节呢,我们停一下。
我来说两句