00:00
那接下来呢,我们给大家讲路由里的另外一种参数,叫做search参数,讲这个东西之前呢,我打开代码,把刚才所写的PAR参数的传递呢给它删下去,要不两个放在一起它就乱了,刚才的代码呢,我给你放在这儿了,接下来打开pages里的detail,我不需要任何的hook,这块呢也不用调用了,都给它删掉,但这儿呢,我就不确定了,所以说我要把这一些东西啊,都给它临时替换成叉叉叉一会儿怎么写再说呗。还有就是规则这块儿你也得改一改,不要在这儿再占位了,大家都知道啊,ROER5的时候就有这个特点,Search参数是不需要占位的,直接问号传递就可以,所以说在这儿不用占位,还有一个地方你得改,就是在这儿你得说到做到呀,你不能再传递参数了,OK,那目前呢,就是这个效果啊,刷新一波home下的news下的message,走走走走,对吧?那为啥有这警告,还是刚才刷新导致的嘛,对吧?它残留着之前的那些路径,那你一刷新没有这路由呗,啊,现在你刷新就没这问题了啊,来走走走走,想办法把东西带过来吧。好,回到传参的位置,在这直接写了啊,问号代表我要携带search参数了,这块呢,强调一下,你不要说它是query参数,我知道这种形式跟query几乎是一致的,但是官网上人家叫search参数。
01:34
哎,ID等于Dollar符,划括号,然后写m.ID这就是一组,那多组之间是不是得用and符再来一组,And符是不是再来一组啊?那第二组你携带的是抬头,那这是抬头,那再往下这就是content,那这就是content OK,参数携带完毕,规则这呢,不用去占位,那接下来就剩下一个地方了,就是detail这个组件去接收参数,那刚才你接收P,那就得用use这个hook,那如果接下来我接收的是search参数呢?你猜也能猜得到吧,From rot到看看你猜的和我写的是不是一个,叫做use search。
02:23
哎,你别搞混啊,刚才的那个叫做use,这个叫做use search PAR,哎,你瞧啊,这就是为啥不让你管它叫query参数的原因,人家叫use search,而不叫use query OK,好,拿过来说,老师,那这我会用了,跟刚才一样呗,Cost a接收一下,那不出意外的话,老师这A就应该是一个参数对象,我传几组,那里边就有几组KY6,那咱看看呗,你说的不一定对呀,啊,那这时候你发现诶。它并不是一个对象,而是一个数组,对吧?啊,那包括你切出去,你切回来你再点,诶你瞧它还是一个数组。
03:06
不能直接拿,那这怎么回事呢?说一下啊同学,这个use search跟谁有点像呢?跟use state有点像。就是在这儿呢,你要通过解构一个数组去接收。一个呢叫做search,就是里边存的是search参数,那还有一个呢,叫做set search,你猜它是啥意思呗,这个是search参数,这个呢是用于更新search参数的一个方法。啊,有点像哈,虽说这个用的不多啊,但是我们也得写一下啊来接下来呢,输出这个search,那你再猜猜,你觉得我接下来输出的这个search,它的值是什么呢。可能有同学会这样猜啊,说老师你看。Use search,我就可以收到参数了,第一个是参数对象呗,那第二个就是用于更新这个对象的方法呗,那不,你刚才说的吗?诶,你注意我刚才只是说它是参数,但我可没说它的数据类型,对吧?那我们来看一下,回到这儿刷一波,嘿嘿,气死你不,他不是一个直接就可以用的参数对象,哎呀,说老师这怎么办呀,绕晕了,来,直接告诉大家吧,这你也别猜了,咱也猜不到,你得掉他身上的一个get方法,你说你要哪个,你要ID,这个时候就拿到了001,哎。
04:32
反应反应,首先use search para拿到search这个参数,拿到之后呢,你得掉身上的get,才能得到它里边的具体某一个参数,那当然了,你想拿title那就title,那你想拿content content呗,好,回到这边,这不都有了吗?哎,那来吧,做呈现吧,接下来就是这儿这儿这儿给它删掉,先接好嘛,ID那这块就是title,那这块呢,就是content,好,那这都给它删掉,那我这儿就有着落了呀,这个这个。
05:12
还有这个走ID title,哎,重新来一下,还有谁呢?Content这不就OK了吗?来看一下效果啊,News message清空一下,1234可以穿插了吧?好,那这是接收什么参数呢?Search参数。然后我们再聊一下它啊,这个set search虽说用的少,我们来看一下啊,它主要用于更新你所收到的search参数,比方说在这儿我写一个按钮吧,我就写在这个Li里啊,Button叫做点我更新一下search参数,或者说点我更新一下收到的search参数。
06:00
来吧,给他一个回调on click里边呢,我就直接写了啊各位,就是这个set search,当然你得包一层,那这里边调的时候,你需要给它传一个search参数的字符串形式,比方说ID等于008,然后and符title等于随便写个,哈哈啊,再来一个and符,还有谁content等于,那这写啥,随便来一个呗,嘻嘻,好看一下效果啊,回到这边。当我点的时候,你注意这里还有地址栏,321走着,是不是更新了,哎,所以说这没什么别的作用,就主要用于更新一下你所收到的这个参数,用的不多,了解即可,好吧,诶,这就是use search para,重点在这两行,你得use,你还得调这个get不是一个直接可用的对象,是你得点get这个方法才能得到,那这里呢,还有一个细节上的问题,同学们想想刚才我是用了use PAR直接就得到了PAR参数。
07:11
那如果不想直接得到呢?咱们来回顾一下,刚才啊,我是不是用了这个叫做use match。得到了一个match对象,你可以从match对象里边点,就有点类似于五的那种写法,是不是也能读取参数啊?那你想想use和use match,哎,有点感觉是两种方式在读取P参数,那你读取search参数呢?其实除了use search permit,还有另外一个钩子,叫做use location。其实啊,同学,如果你RO5过关这块你不需要单独去记忆的,大家想一下啊,你说RO5的时候是不是属于我的PAR最终是从z pro match里边得的啊,那所以说有一个use promise,就有一个use match。
08:02
那如果说你记得五里边这个search参数是咋拿的,那你应该知道这块为什么叫做location,因为之前五里边那个search参数是this.pro.location.search是不是拿到的?哎,那所以说我们再来看一下这个use location,在这呢,临时写一个X等于use location,那这时候大家可能说了,诶,老师啊,这里边是不是得传点路径什么的呀,因为刚才我看到那个use match不是传了吗?那这块咱试试呗,输出这X啊,前面给你加一个分隔吧,写一个艾符逗号,好看效果啊,刷新一波同学用传路径吗?不用打开location对象,你会看到一个非常熟悉的人,谁呀,Search,想想当年是不是location.search啊,你看如出一辙对吧?好,那这一小节呢,我们停。
我来说两句