00:00
哈喽,各位小伙伴们大家好。那接下来啊,咱们呢,去聊聊陆游传参相关的面试题。那咱们呢,先看一下的第一道面试题。他问啊,说路由传递参数的时候,它有三种写法。那么它要求的呢,是对象写法,那如果是对象的这种写法,Pas是否可以结合para参数一起使用?那咱们呢,去看一下咱们的项目。那首先说啊,咱们在这里可以输入关键词对吧,那么点击搜索按钮的时候,咱们在这里讲到了路由的跳转以及传参。那像这样的面试题呢,那咱们呢,就在这个场景下去给他解决。对吧,也就是说从你的home首页,OK,你要跳转到search路由当中,而且呢,还传递了para参数和query参数。
01:05
那所以说啊,咱们的这个面试题正好就在这里去聊一聊。那么老师啊,把它们拿到咱们的这个组件当中,应该啊,是在咱们的这个hier组件这里。对吧,那所以说啊,咱们去找一下咱们的一个heer组件就在这儿嘛。那咱们呢,也是刚刚讲完路由传递参数的三种写法,比如说字符串模板字符串和对象的写法。那这里啊,老师呢,把它呢给它注释上,那这里就在这儿,咱们稍微聊聊这些面试题。那这个呢,是面试题一,哎,面试题一什么呢?咱们呢给他拿过来。面试题一,他问的是。路由传递参数对象的写法,那PA是否可以结合帕斯参数一起使用?
02:03
那这里啊,要注意是不可以。那咱们呢,得测试一下。就比如说啊,咱们写一个this点儿Dollar router.push。当然他问的是对象的写法,那咱们呢,就书写对象的写法。那首先说啊对象的写法啊,咱们经常会给路由命名啊,就是内幕的这种写法,当然别忘记还有PA的这种写法,就是往哪儿跳,比如说派。你要往哪跳啊?是往杠设置路由去进行跳。那以及他问的是是否可以结合para参数一起使用?那当然咱们的路由当中啊,可以看一下的已经占位了。那咱们呢,尝试一下传递一下子para,阐述para。PA Ms,为什么呢?比如说咱们的这个叫keyword等于z.keyword那当然啊,它呢也可以传query参数,那query参数咱们也来一个,就是key等于this.keyword.toup caic,对吧,让它变成大写的。
03:20
那所以说咱们写的这行代码呢,是符合人家面试题的要求的。这是路由传递参数,OK,是对象写法,而且呢,要求他问的是PA能不能结合para参数一起使用?那咱们呢,回首呢,去尝试一下,咱们可以看一下子。比如说老师呢,来一个关键字叫做q we。那么当点击按钮的时候,咱们呢,进行了路由的跳转对吧,以及传递了呃,Para参数和query参数。但是你会发现啊,它根本就不能进行路由的跳转。
04:02
对不?你看他现在明显底下是不是有相应的警告,而且这里是不是也出现了问题。对吧,所以说呢,这块呢,要注意一件事儿,什么事呢,就是咱们的pas的这种写法,它不能结合帕S参数一起使用,那这里是需要注意的。所以说呢,咱们呢,给他一个来一个答,那也就是说路由跳转传参的时候。那么对象的写法可以是name命名路由或者是书写pas的形式。但是需要注意的是啊,需要注意的是是什么呢?就是PA的这种写法呀,哎,是不能与parama参数一起使用的。所以说呢,这件事儿需要注意一下。那所以说啊,这个呢,就是咱们的第一道面试题,那这里要注意是不能一起使用的。
05:05
所以说如果你想传递para参数,OK,咱们一般是对象写法,而且要命名路由是name的这种写法。这是咱们的面试题一。那么老师把这个面试题和顶上咱们讲过的代码,老师呢给它来一个分割线,咱们呢给它分开。对吧,那这里呢,老师呢,给他空一下子往底下挪一下,哎,那这个呢,是咱们的面试题一,再看面试题二。就是如何指定para参数,可传可不传。哎,那这道面试题呢,老师呢,也给他拿到咱们的笔记当中。咱们呢,去看一下。这个呢,就是咱们的面试题二。就是如何指定帕罗参数,可传可不传。那当然咱们呢,去看一下咱们的路由,那咱们的路由啊,现在目前而言,它要求你是需要传帕参数。
06:08
对不?那假如说我就不穿对不?比如再来一个就是this.dollar router.push。往哪push呢?比如说name,哎,往咱们的这个search跳转。现在咱们的路由要求是传递parama参数,但老师就不传,你看它会出现什么情况。那老师呢,带一个query参数吧,Query为什么呢?为咱们的K以及z.keyword.to upper up c对吧。那咱们呢,去尝试一下子。那也就是说现在人家的路由要求必须带帕斯参数,而咱们就不带,只带了个query参数,那咱们尝试一下子有没有什么问题,比如说q we,那咱们点击搜索进行路由跳转。
07:04
那咱们看一下子有没有问题呢?哎,有的同学可能说老师这也没什么问题啊,你这里要注意一件事啊。松奎,你这里要注意一件事儿,咱给他拿过来。你看这儿啊,老师这块在这呢,也做一下笔记吧,在这做一下笔记啊,就比如。你配置路由的时候,哎,已经占位了,谁占位了,是不是这个para参数已经占位了。但是陆游。跳转的时候怎么的,哎,就不传递,那如果你就不传递了,你要注意一件事儿啊,啥事儿呢,就是咱们的这个路径啊,会出现问题,就是这个路径会出现问题。什么问题呢,你看老师呢,把它给你拿过来。那也就是说,当你看这儿。
08:00
也就是说你从首页跳转到色页,那最基本的一件事儿,它的路径应该是这个样子的,HTTP。叫做local host冒号8080对吧,以及井号。那你这里要注意一件事儿啊,你现在是想往哪跳,比如说往search跳,OK,你是不是得有色,虽然说你没有传parama参数,那parama参数你没传,那你是不是至少是色是得有啊。对不,所以说你色你得有啊,对吧,你后面再拼啥拼了咱们的query参数,比如q we。但是你会发现一件事,咱们是从home跳转到色,但是你要注意,甚至连色路径都没了。对,不只是出现了一个宽参数,所以说这里要注意。看这这是明显有问题的,也就是说你至少得有一个search啊兄弟。
09:01
对吧,虽然说你那个帕参数可传可不传,对吧,比如说q we,那你帕参数假如说我没给,那就是没有,但是至少你的路径当中它有测。对不,所以说这块呢,要注意一下子。比如说咱们呢,也去做一下笔记,比如说如果。陆游。要求传递参数。哎,参数。哎,但是你就不传,哎,但是你就不传递帕参数。那你会发现一件事情一件事情什么事呢?哎,就是这个URL会有问题的。对不,那么如何指定一个para参数可传可不传呢?其实这个很简单。就是在咱们配置路由的时候啊,看这。这块呢,就是咱占位的对吧,将来相应传递的那个帕参数,你可以在它的后面加上一个问号,代表着这个帕参数可传可不传。
10:08
所以说老师呢,也做一下笔记,看这。比如说如何去指定写一下就是如何指定para mass参数可以传递,或者是哎不传递。那很简单,就是在配置路由的时候,那么在站位的后面怎么的加上一个问号。啊,问号,那这个问号代表什么呢?问号就是代表着参数帕斯参数。哎,可以传递或者不传递都可以。其实这个问号呢,你可以找一种其他的方式去记忆,就比如说正则,正则当中的问号代表出现的次数是不是零次或者是一次,那也就是可有可无。
11:00
那么这回呢,老师呢,是加上了问号,代表着咱们的这个para参数啊,可传可不传。假如说我没传你看,假如说我没传你看啊q we,那你的路径啊,它是没有问题的,也就说你设置是有的,但是你没有啥,没有后面那个para参数,但是你要至少保证的URL是准确的。对不?所以说这个小套路你要学会,就是如何指定一个para参数,可传可不传,在后面加上一个问号。所以说呢,这个呢,是咱们的面试题几呢,面试题二。那咱们再看一下子,你看这儿。再看这个面试题三。咱呢,也给他拿过来。那这块呢,老师呢,也给他搞一下这块咱也给他注释上。对不,大家的注释上,那看这这个呢,是咱们的面试题三,面试题三。
12:01
这个老师呢,把他呢也给你扔过。那咱们呢,也看看啊,他说。Ma参数啊,可以传递也可以不传递,那不就是咱们现在这种情况了,咱们已经在站位的后面加上了一个问号,代表着帕尔马斯参数可传可不传。但是你看他问了一个问题啊,但是如果传递的是空创,如何解决?啥意思,你看。This Dollar route push。对不?你往哪push呢?Name往咱们的search路由push,它的意思啊是有para参数。对,不,但是你要注意它的para传参数啊,它传的不是一个正常数,传的是一个空串。对不,那当然咱们的宽参数啊,咱也给他带上。IK,为什么呢?这点keyword.toup CA。
13:04
对不,那也就是说咱们现在的这种写法是符合这个题意的,就是para参数可传可不传,咱加问号。但是如果para参数传的是空串,那如何解决?那咱们先看有什么问题。你看啊,老师来一个q we走,你看出现了什么问题,就是路径当中少了色。还是那句话,虽然说咱们的para参数可传可不传。对不,就算咱没传你设置也应该有啊。对不?所以说你会发现一件事,什么事这块呢,会有一个小小小的一个呃问题,就比如说咱传个123OK,那你看路径它是正常的,你看嘛,比如再来个q we路径它是正常的。对吧,但是万一他传了一个空串,OK,那你看他的路径它是有问题的。
14:01
对不?你看吧,路径是不是有问题。那像这种问题怎么解决呢?很简单,看这用什么用氨底范解决,哎使用写下使用氨范解决,解决什么问题呢?就是这个parama参数可以传递,或者是哎或者不传递的情况,对吧,传的是啥是空的。字符串啊,所以说可以用安底翻去解决这种路径问题,可以怎么写呢?你看比如说这是个空串,那也是主要成布尔值谁啊,是不是false对吧,那我取哪取后者,后者是啥是安迪范。那咱们可以看一下的可不可以解决这个问题,也就是说你至少得保证设置在路路路径当中得出现。那你看,那咱如果呃写了安范,你看色值是不是有了,咱们的帕斯参数是不是可传可不传,或者说你传空串也没问题。
15:02
所以说,这个小套路也要学会。也就是说你的para参数OK。可传可不传,但万一你传的是一个空串路径会有问题的,所以说咱们用UN fun去解决。所以说啊,这个呢,是咱们的一个面试题三。那接下来呢,还有一个面试题,咱们可以看一下,看这。看这。这个老师呢,把它呢,我也给你拿到咱们的笔记当中看这。这呢咱们也做一下笔记,那这个呢,是咱们的面试题四,哎,面试题四。咱给他带啊。他的问题是什么呢?就是路由组件能不能传递数据。Prop这里咱们应该知道一般是不是用父子组件通信呢?对吧,但是人家问的是路由组件能不能传递proper数据啊,如果说你有基础的功底,那你应该知道是可以的。
16:07
哎,可以的。对吧,哎,咱们可以看一下的,而且呢,有几种写法呢,有三种写法,来写一下三种切法。那咱们呢,可以呢,去看一下对吧?哎,比如说咱们举个例子,咱们呢,还是让他进行路由跳转,咱找到这儿吧,就找到这个正常的。咱们呢,还是让它进行路由的跳转,CTRLC。对吧,那以及呢,老师呢,在这儿呢,给他拿过来,咱给他打开。对不?比如说现在咱们恢复到了正常的情况,你该传参传参对吧,比如说q we,哎,走你。没问题,那他他的问题是路由组件。能不能传递数据是可以的。对不,那在哪里搞呢?是在咱们的路由这里啊,路由传参有几种形式呢?有三种形式。
17:04
第一种形式是什么呢?就是布尔类型的啊,这块咱写一下子,比如说陆游啊陆游,哎,咱们把这个问题给他拿过来吧,正好在这儿也做一下笔记,就是路由组件能不能传递process数据。咱们写一下,那这不就是路由组件吗。对不?哎,咱给他拿过来可以,那第一种是什么呢?就是布尔直的写法,不尔直的写法。哎,就是为什么为true。那这样做的一个好处是什么呢?是可以把para参数作为路由组件身上的属性。咱们呢可以看下,但是这块呢,一定要注意一件事是只有para函数。Per Ms。那咱们呢,可以看一下子,你看什么意思来看这儿。比如说啊老师呢,来一个q we啊。
18:02
你的query参数和参数该传的你就传了,对吧,但是人家问的是路由组件能不能传参,那咱们呢可以看一下。你看啊,在咱们的这个设置路由组件的身上,是不是多了一个叫做Dollar at t RS属性叫做keyword。值,为什么呢?Q we?那就说路由组件能不能传参传purpose可以,那您可以回到咱们的这个路由组件,这里应该是谁呢?是search这里您可以接受。接收他的。对不,那你接收的是谁?咱刚才也看见了,是不是就是keyword。对不,那咱们呢,可以刷新,你自己可以看一下走老师还是来一个q we走你你看路由组件它能不能传递prop是可以的。对不,所以说这块呢,要注意一下,那也就是说路由组件。
19:03
路由组件是可以传递的。对不,而且咱们拿到参数的方式呢,更简单一些了,就不用写什么,呃,到root.keyword你就可以直接用参数了,就是keyword。对不,所以说这两种形式呢,都可以把参数给它传过来,但是你要注意像刚刚的这种prop属性为不处的这种写法,要注意它只能传递帕马斯函数。比如说路由组件,它只能传prop对吧,而且是参数,这块要注意。所以说呢,这种呢是路由组件传递purpose的方式之一,叫做布尔值啊,但是你要注意它只能传递帕斯参数。对吧,所以说这块的老师呢,给他注上啊。当然它还有第二种写法,就是什么呢?对象写法。比如说啊,咱们给他来一个叫做prop,哎,比如说我给路由组件啊,传递两个prop,一个叫A等于一啊B等于二,说白了就是额外的给路由组件传递一些参数。
20:13
咱们呢,可以看一下,你看啊老师呢,给大家来一个q we,你看咱们的路由组件的身上啊,它真的有这个这个这个这个这个wt RA嘛,等于1B等于二,那也就是说你路由组件这里可以通过pro接收,比如来个A对吧?哎,来个B。呃,来个B。再给他来一个B去接受,那当然你在这里呢,就是可以使用的了。对吧,比如说A对吧,咱就测试一下A,你看有没有是有的。对不,所以说这种写法呢,它也可以传的是一个对象,对象写法说白了就是额外的,哎,额外的。对吧,给路由组件传递一些,哎,一些prop。
21:02
对吧,当然这种写法咱们也不常用,最常用的是什么写法呢?是函数写法,是函数写法。对吧,可以把。Para参数。还有宽为参数。对吧,通过shopper传递给路由组件,哎,叫做路由组件。哎,就是这种写法,PRO8来个什么,来个间多函数。当然你要注意一件事,见头函数当中会把路由的信息注入,你可以拿到什么呢?你可以拿到quary参数和帕参数给它返回,比如说key word,对吧?Keyw等于什么?比如说root root,或者咱这前面叫Dollar root。对吧,哎,叫Dollar root,叫Dollar root点哎,比如说咱们的这个叫做parama参数,点keyword对吧,可以把para参数以及query参数,那就是呃,Dollar root。
22:07
对吧,点query.k对吧?呃,传递给谁呢?传递给咱们的这个路由组件,咱们可以尝试一下,你可以看一下子,比如说q we啊q we,那咱们呢,看一下子路由组件的身上有没有相应的,呃,这个。这个AK是不是也有,以及proper是不是已经拿到了?对不,所以这块呢,你也可以去接收接收咱们的K对吧?哎,当然A和B咱们就不要。对吧,所以说路由组件能不能传参能对吧,但是这种写法呢,其实呢,你知道就可以,因为咱们路由传参的时候啊,路由组件传参的时候,咱们很少用的,一般都是什么呢?都是通过这种写法去获取到。对吧,所以这块是谁,那这块咱写,那这块用的时候是不是就叫keyword对吧,只不过在组件获取参数的时候比较方便一些,就不用到了root.query点什么,到了root点点什么就直接从组件的身上直接捞到,对吧?从组件身上的这个purpose就可以获取了。
23:13
对吧,所以说咱们呢,可以看一下。对吧,当然你这块呢,你不写他也没问题。对吧,因为咱们呢,可以通过最开始的这种写法是不是获取到参数,当然,但是你得知道人家将来问你的时候,就是路由组件能不能传递proper数据,你要注意是可以的。对不?当然这里呢,咱们呢,可以简化一下写,比如说这个函数题给它去掉,比如说啊,咱们呢,把这个去掉,那你看它不就变成这个样子了,但是你要注意变成这个样子,你看它行不行,它明显语法不过关。你看吗?对不为啥呢,你这块要注意,如果咱们变成简写方式,它把这个对象啊对象这个划括号当做函数体了。对吧,你看箭头函数是不是需要函数体对吧,它里面认为这个语法它咋它不正常,所以说啊,你给它加一个小括号,当做一个整体给它返回就行了。
24:10
对不,那所以说咱们看一下子找你,那咱来一个比如q we啊,当然这种prop写法常用的也就是函数的这种写法。当然那这个可能咱们只会用这一次,后面咱们也不会用,因为咱们路由传参呢,一般都是这种写法去获取到的,当然路由组件传单这种形式呢,更就是组件在用的时候更方便一些,直接通过名字是不是就可以拿到对吧,说白了就是在路由这里已经处理好了,在组件这儿拿的时候更方便一些。但是不管怎么写,其实这种手段是不是也能拿到,当然这种写法呢,你不写他也可以,但是将来人家面试的时候问你说,哎,路由组件能不能传递proper,你要注意是可以的,而且还有三种写法。
我来说两句