00:00
好嘞,各位,那在这一小节呢,我们给大家讲一下如何给路由组件传递参数,简称路由传参,先看一下我们要做的效果啊,走,点击home,点击message,注意了里边的每一个消息啊,也是可以点的,并且你点的时候会展示这个消息的详细信息,来再看一下,点击001,点击002来暂停各位,这的逻辑其实非常简单,就是你点哪个消息我就展示哪个消息的详情,当然我这详情啊设计的有点太简单了,只是包含了编号和标题,正常来说得有什么消息的发布时间,消息的发布者在这儿同学不写那么多,两个够展示够用就行啊,分析一下吧,这个结构其实这个里边啊,各位是包含着一个三级路由的。不知道大家能不能发现,来我们分析一下,你说这儿啊,是不是一个导航区,那这儿呢,是一个展示区,在这个展示区里面包含着一个新的导航以及一个新的展示,重点来了,就是在这个展示里面,它又包含着一个导航以及一个全新的展示,对不?各位,哎,就通俗点说,套娃呀,已经套到第三层了,这儿呢,跟大家说一下,一般在开发当中啊,很少很少,我们能把路由套到六层,就是路由的嵌套达到四层和五层就已经是一个极限了啊,所以说在我们的课堂上不去给大家讲什么四级路由,五级路由,六级路由,因为没有意义各位,就是如果你把123级都学会了,理论上你套100层都行,是不?哎,但是没有那个必要啊,OK,来啊,三级路由明白了,那接下来怎么去实现呢?慢慢来,一步一步走,各位首先啊,我做这么一件事,让这列表呢变得真实一点,就是目前我这个消息列表啊,写的太假了,都是我。
01:43
自己写死的数据,不信你看你找到pages,你找到message,你看这各位,这不都是我写死的一个一个的Li吗?我想让这些东西啊,是真正拿数据遍利出来的,所以说在这呢,哎,我是不是得配置一个data啊啊,那给数据起一个名字吧,一堆消息,那当然叫做message list,你叫message AR也行,对吧?我在这呢,叫做list值呢,当然是一个数组里边每一个消息都得有ID啊,比如说第一个是001消息呢,还得有标题,我就直接写title了啊,叫做消息001啊,如果你想做的更真实一点,各位这东西是不是可以发一个价请求,从服务器那边是不是捞过来?诶,那同学用H发个请求不是啥难事对吧?在这呢,咱就不掩示了啊,在这来一个小逗号,再补几个啊,这是002,这是003,这呢是二,这呢是三,OK,那这些东西同学不用写这么多个了,留一个是不是就可以了啊v for便利对吧。
02:39
V for便利谁呀?便利A还是便利这个呀,说明白啊,各位可不是A是Li u Li里嘛,得有一堆Li有一堆,谁就给谁加上这个v for啊,那便利的肯定是这个,那来一个就是M音这个对吧?取它的首字母了,你用item啥的也行是吧?各位走,只要一遍利这个人必须马上就得写上m.IDOK了吧,那这里边也得换呗,插着语法嘛,读出来呗,谁呢,m.title头呗,OK,回头看一下效果啊,走,刷新一波啊,行了,这些消息至少是通过数据生成的了,对吧?那接下来呢?
03:14
琢磨一下功能呗,哎,这是什么呀?导航区这是什么呀?展示区,然后写到这儿啊,有些同学可能就抢答了,说老师来你停,你这事交给我,我会写,你看啊,我都已经摸清这个套路了,你这有about选项,有home选项,那就得出现about.home点,哎,你这有news选项,Message选项,你就得有news.message点,老师我学会了,你这不是三个选项吗?说白了就是导航区里面有三个导航吗?老师来我教你啊,这么的消息001的详情啊,你就写一个组件,消息002的,你再写一个003你再写一个,你写三个那不就得了吗?哎,就比如说同学来,我写一下详情那单词,哎,De taal detail嘛,说老师你写个detail一点,哎,就是给消息001用的,哎完老师你再多写几个,再来个DETAIL2DETAIL3,这不就得了吗?哎,多简单啊,点击消息001,诶,我就展示一,点击002呢,我就展示二,但是同学你这么做是有严重问题的呀。首先咱不说负不。
04:14
复用这件事啊,你说如果有一天就这列表由最开始你写代码时候的十个变成了100个,你咋办啊,你发个邮件通知用户,说今儿晚上你别用系统啊,我加个班,你等我把那十个组件啊,再补90个,我写成100个,等我写完DETAIL100的时候啊,然后你再用这系统,不可能吧,各位,哎,正确的做法啊,是这样的,你啊只写一个组件,没有这么多,就这123啥的不用各位只有一个点。说老师那你这不行啊,那你看老师你这是一个导航区,完了展示区你不是要展示东西吗?哎,老师你要只写一个,来我写下第一啊,点view,说老师你写一个哈,那来我看着吧,里边你得写ID吧,就是那个编号是多少,老师你写了,比如说你写的是666啊,你根据比如说这样同学我根据那个消息一去写,哎,说老师这是你写的detail啊,ID呢是001,哎完了,这是你写的这个title啊,内容呢是消息001,说老师你写完了啊,那你这样不行啊,老师,那你看当有一天你点击消息002的时候,你也得展示这个,点view,那展示的不还是001的信息吗?
05:22
说老师,那你当年写这个得t.review的时候,你不就得指定里边的内容吗?那你这一写这不就写死了吗?那以后别管我点消息几,那展示的不都是001,还有消息001吗?你这不对呀,各位就不能变通一下吗?大家想想啊,我点击消息001的时候,确实啊得往这个这块跳,但是跳的时候我能不能把消息001的ID,还有消息001的什么呢?这个title给它带过来,同理,我点击消息002的时候,展示的也是组件,但是我点的时候把一些数据带过去了什么呢?ID和title,那同理各位当你点击消息003的时候,展示的一直都是一个组件,哪个组件点view,但是这个组件所收到的数据是不同的,这不就是属于给路由组件传递参数吗?同学,我问你它是什么组件呀,当然是路由组件呀,我得看你点的是哪个消息,然后我再呈现这个组件呢,对不?各位也就是说你得。
06:22
点这个导航,我才能给你呈现这个整个过程当中,我是从来都不会写出这种代码的,啥意思?组件标签不会写这个是吧?各位啊,来吧,那接下来写写,首先别想别的,就把这组件呀给它写出来,那组件里面的结构是什么样的呢?看一下课件,很简单,消息编号消息标题,回到代码里写写右键新建一个组件detail.view固定的这些结构呢,给它写好啊,名字呢,给它起一个name detail,然后里边写一下结构啊,写一个div啊,或者同学不写div了,来吧,不就是一个列表吗?直接写u Li,然后里面呢是两个Li啊Li的内容呢是消息编号,不是编码编号,那具体是什么编号呢?我不知道,用问号代替,那再来一个叫做消息的什么呢?标题是标题吧,看一眼啊,其实写什么都无所谓啊,标题对,OK,好了,写完了啊,逐渐的准备好了,接下来呢?
07:22
是不是得去定规则去,还说老师怎么就定规则呢?想想吗?各位这啥呀,导航区点击导航区要展示这个展示区,那你是不是就得写规则呀,是吧,各位,也就是说你点完消息001之后,这页面这路径得怎么变,这会儿才能被监测到呀,那写呗,回到这儿找到路由配置信息,同学,这回你可得想好我应该在哪个里面写,肯定不能在about里面写,肯定也不能直接在home里面写,因为home里面有两个news message,你接下来考虑的是message里边的是,所以说各位在这得写个啥children选项啊,然后它的值呢,是一个数组里边再配置一套规则对不对?哎,把这些东西呢,给它复制过来,往这一粘贴啊,这换个名吧,第taal detail详情,那它所对应的就是detail这个组件,那你就得引入detail这个组件,对不啊,来把这单词呢,给它复制过来,给它粘过来走,OK了吧,同学,这规则是不是定好了,那接下来呢,回到这个message组件里面,这块别用。
08:23
A去写了对不对,A标签同学,那不实现的页面跳转吗?所以说你得把这A呀给它换成什么呢?叫做rot link是吧?各位这块呢,别用HRA了,用to啊这回去哪啊啊这回好像写的就得一点了,是home下的下的详情是吧?各位,哎,然后你点完了之后路径变不变呢?看看呗,啊回到这边啊刷新一波,我点消息001了啊走诶看是不变老师,那你点二呢,点二也是这个,因为它路径是一样的,明白不?各位,我们不是说嘛,点击001002003都想展示得它有那个组件,那当然路径得是一样的嘞,嗯,那回来接下来呢,在哪儿展示对不对,所以说在这个导航的下边啊,我给你写一个HR做一个分隔,然后在这呢,我写一个RO view,哎,就是路由视图好了,这回呢,瞧一下效果,回到页面里面,其实已经出效果了啊,但是我们重新点一下各位啊,About home news mes,哎,我想看消息001的详细信息,走,你是不是出来了。
09:23
我想看二,想看三,各位是不是也都能展示,但是里边的内容其实是写死的,我接下来要做的事儿就是点击001002003的时候,我把不同的数据带给detail这个路由组件是不就可以了呀?啊,放大一点啊,大家可能不太好观察来吧,开始写怎么办呀,跳转的时候带点参数过去,哎,其实同学路由啊,能接收两种参数啊,我们先给大家说第一种啊,叫做什么参数呢?来写下这词儿啊,Query参数哎,什么意思呢?同学,我们在发这个,呃,Adjust请求的时候,你携带过query参数吧?在这个里面的query参数跟这个里面呢,几乎是一样的。诶回到这儿,各位这么写啊,直接就说了,在后边呢,通过问号的形式去携带参数,比如说我想带一个ID过去,那你就写ID,等于先写子,比如说叫做666啊,然后呢,我还想带着这个title过去,那多组TY之间呢,用这个and做分格,这不就是query参数典型的特点吗?啊,写一个t title。
10:23
那开头呢,随便写一个,比如说叫做你好啊,对吧,来一个感叹号,OK,写完了说老师那这么的我就能把参数传给那个路由组件了,是的,也就是说人家在解析的时候发现,哎呦喂,这兄弟啊,写到这儿应该是看哪个组件啊,因为我发现了什么呢?这个问号,问号后边的东西啊,那我明白了,是这兄弟啊想带着的query参数,OK啊,说老师那传过去了,传过去了,那我这怎么接收呢?是不?我得把这个问号替换成我接收到的东西啊,那这个时候同学你听好了,有一个人就特别的重要了,Mount里面我给你写这么一个东西,Consollo this.dollar符road同学还记得这个东西吗?它是干嘛的呀?能够得到这个组件所相关的路由配置信息,对不对啊,我们之前是不是给大家输出过这东西啊,哎,这里边有什么呢?有一个我们最熟悉的人,是不是那个pass,那pass当年不是你在这儿写的这个pass吗?是吧,各位啊,那除了这个pass还有一些信息,那些信息里面。
11:23
包含着参数,行了,不卖关子了,来咱看看吧,啊控制台的清掉我先切出去,慢慢点MESSAGEAGE001,哎同学你看啊得组件是不是挂载了,换句话说同学不挂载,你这看到的是什么呢?是吧?哎,来打开走着。你自己说吧,去哪取是不是在这呢?你看看同学你带的ID,你带的title是不是都过来了,那怎么取呢?This点到了f.curry是不是拿到这些东西啊?哎,好了,各位回到这里边,你知道怎么写了这些问号啊,给它替换掉,直接写Dollar符,然后点呢QRY,然后点呢ID,同样的这堆代码呢,给它复制过来,在这呢,改个单词就可以了,不是ID的,是title是吧?各位来看一下效果啊,来切出去啊,清掉messages,我想看001走着,你看666你好啊,这不就得了吗?说老师那就写完了呀,同学,你这是一假的。
12:20
假的,你点二你点三不都这个吗?是吧?各位啊,那怎么让它变成真的呢?啊来先看一下这儿啊各位哎,路径上是不是有体现哎,你所携带的参数是不是都在路径上体现出来了呀?你看刚才你写的吗?问号嘛,什么ID这些东西来吧,说说这儿别总传666你好啊呀,那回到哪呢?Message里面来吧各位,改改咋改呢?啊说老师不能写666,我教你,你得写这个东西m.ID对吗?你想带ID嘛,嗯,老师这样你也别写这你好啊,你得这么写m.title哎,老师这样你就写完了,那看一下效果吧,各位啊,切出去切回来给它清掉,点击001。你看真有意思,打开这个,你知道你犯错犯在哪儿了,各位,你写那m.idm.title哎,就这东西,同学人家当啥用吗?人家当最传统的字符串去用,老师凭啥呢?凭的就是你两边写的都是引号啊,人家当然当成字符串去用了啊说老师那怎么办呢?我想让他知道这个m.ID啊,我读的是变量是吧,读的是数据,那怎么办呀?同学,很简单,这是不是得加一冒号啊?同学,你这不加冒号,就这里边你写出花来,它都是字符串,你说对不?就你看明晃晃的两个引号在这看着呢吗?啊,那咱说说怎么能让他知道是读取的这个M呢?前边是得加一冒号啊,V杠办,但你这么写啊,你可就错了,来,你自己看效果去啊,整个效果都出不来啊,告诉你了,模板编译失败,为啥?
13:45
同学,你琢磨琢磨啊,我这一旦加了冒号,那就意味着我给你画的精准一点啊,咱较这真儿,那就意味着粉色框里边所有的这些东西,注意,我说粉色框里面不包含那两个引号,粉色框里边的东西都当什么解析,当GS去解析,那同学我问一下谁家GS代码能这么写呀?上来就写斜线home,斜线message,也就是说你能这么写代码吗?Cost X等于完了这一堆东西,你X你可以写这个,比如说你写个123啊,然后你一个字符串,Hello,这都行,那我问一下X你写是啥呀?斜杠,斜杠。
14:27
说老师那正则谁家正则是这个写法啊,正则也不是这写法啊,对吧?那这不对呀,哎,说老师是这怎么办呀,来在这看着加一个模板字符串,那个字符走着回到哪呢这儿,诶走着看好了啊,这会有点乱看好了说老师你知道这不写回去了吗?你看啊,你告诉人家,哎加了一个冒号,说里边的东西啊,当成GS去解析,然后人家一解析呢,发现好家伙,你里边写了一个字符串,你这不白写了吗?老师你这一保存你回来那不是一样的效果吗?各位我再改一下就好了呀,模板字符串里面想混着GS的变量,那我得怎么写呢?到了符花括号m.ID哎,那这呢,剪切走到了符画个号m.title这不就搞定了吗?对不?各位哎,最后给大家捋顺一下啊,你这加了一个冒号,然后呢,人家就把所有绿色框里的东西当成了GS去解析,一解析不要紧,发现你写的原来是个字符串,而且是模板字符串,而且里边还混着GS的变量。
15:27
这意思不?各位OK,这回不就得了吗?啊,切出去切回来,001002003,怎么样各位啊,参数是不是完美的传进来了呀?啊,点击谁那就是谁的信息呗,OK啊,那这时候啊,可能有些同学说,哎,老师这也太恶心了,我的妈呀,这种写法老师你这传两个还凑合,我要传四个,那不废了吗?这东西写死我了呀。所以说嘛,同学还有一个写法能够更加清晰一点啊,在这呢,先写好一个注释啊,叫做跳转路由RO link不就是跳转路由的吗?啊,然后并携带query参数啊然后叫做to的字符串写法,嗯,那你说我这to写的是不是一个字符串啊,是一个字符串对不对啊,把这个呢给它注掉,把这个注释啊也给他再来一份小会车,再告诉大家一个写法,叫做兔的诶对象写法,把这个复制过来,粘过来,空行删掉,解开。既然是兔的对象写法,那就一。
16:27
味着里边这些东西删掉,我得写成一个对象,然后呢,先别急着写里边的东西,里边的东西呢,可能会有点多,所以说呢,我先调整一下这个结构啊,后边这些东西如果你觉得烦,那就给它删掉啊,在这呢回撤,在这儿呢,回撤往前一缩进,这回明白了吧,RO link开始标签,RO link结束标签里边包裹着的是你要呈现的数据是吧?然后再写这个to里边的对象在这儿,你再敲个回车,同学,这是属于标准化的结构写法,当然了,你给它混成一行也可以,是不,那to既然这个对象,对象里面能写什么属性呢?能写两个,各位在这啊,第一个pass啊,这什么意思呢?就是你想往哪跳转,我当然想去的是data这个组件,直接就写到这儿,你就写到你想去哪个组件就停下来,不要再写了,舒老师,那我的参数呢,哎,借助这个配置项QU以r y query,它的值呢,是一个对象,然后说吧,你想携带什么参数,老师,我想带个ID值呢,一会再说,老师我还想带一个title值呢。
17:27
一会再说同学,那你知道了,接下来这个ID得怎么写呀,是不是m.ID那这title呢,当然就是M,点什么title不就得了吗?说老师那这么写它长呢?哎,同学那你看啊,人就不知足,这么写怎么的,哎,写成一行了,说太乱,哎那这么写呢,又说配置项太多,又说长,各位反正你自己取舍一下是不?哎,个人建议啊,别这么写,真乱,你传东西一多之后,回头特别难调,你写了一个对象的写法能好一点,来我们看一下效果啊,切出去切回来清掉,点击001002003是不是可以啊,大家一定要记着是从query里面打的去取数据,所以说人家叫query参数,还有就是这儿各位,这是典型的query参数携带的方式,对不对?问号,然后呢,K等于Y6,然后and符K等于Y6多组KY6之间呢,是用这个and符做分隔的,OK,这不就传过去了吗?啊,然后写到这儿啊,有一些同学可能说,哎呀老师,我发现新大陆了,原来这个to啊,还能写成一个对象。
18:27
呢,那老师我有一个小想法哈,就是在这个APP里边啊,我不是写过往这个about跳吗?那老师也就意味着我可以这么写呗,我写一个对象,哎完里边呢,我写这个pass,那当然这块你得加上一个冒号啊,然后老师这儿呢,我这么写,我写一个写杠about,老师就是我能这么写呗,那肯定是你能这么写呀,那你看一下呗,刷新之后点击about是不是也好用,但是同学犯不上,为啥说呢?你说你是直接写一个斜杠about箱,还是写成这种方式再配置一个k value箱啊,毫无疑问当然是这么写比较舒服对吧?需要的时候比较繁琐的时候,哎,回到message里面,然后呢,你再这么写是不?各位OK,这就是路由传递什么呢?Query参数啊,两种写法,一个是to的字符串,一个是to的对象,推荐大家用这个来快速的给大家整理一遍read me文档路由的query参数啊,可以这么写啊,不嫌麻烦就一点点拼呗,或者是直接写成一个对象啊,那这块呢,参数就传过去了,那接收。
19:27
呢,直接在这儿就接收一下得了呗,啊大家注意这种携带参数和接收参数一点儿也不打扰谁呢?来,回到这儿,一点也不打扰这个路由器的配置,同学你看在这儿能体现出来我收到什么参数了吗?体现不出来,体现不出来任何人要接收参数对不对,哎,是不打扰这个配置的,这个配置同学你看一共我们就写了三个属性,Pass component以及什么呢?Children准是不各位哎,好了,那把这src呢,给它复制一份,给它改一个名字啊32_src走哎,叫做路由的q UE r y query参数,OK,这小节停。
我来说两句