路由传递参数相关面试题

509 阅读1分钟

整理了一些关于路由传参的知识点及面试题

路由传参参数有几种写法?

params参数:属于路径当中的一部分,需要注意,在配置路由的时候,需要占位

query参数:不属于路径当中的一部分,类似于ajax中的queryString ,不需要占位

路由传递参数的三种形式:
1、字符串形式
this.$router.push('/zxc/'+this.msg+'?k='+this.msg.toUpperCase());
2、模板字符串
this.$router.push(`/zxc/${this.msg}?k=${this.msg.toUpperCase()}`)
3、对象形式

使用对象形式的时候要在配置路由时在跳转路径的地方加上路由占位符,和name路由名称

image-20220110170900308.png

this.$router.push({name:'zxc',params:{msg:this.msg},query:{k:this.msg.toUpperCase()}})

image-20220110171732223.png

注意!!!正常情况下我们传入什么参数就会得到什么参数,用大小写来区分params参数和query参数

一、路由传递参数(对象写法)path是否可以结合params参数一起使用?

根据题目要求我们写出跳转方法以及携带参数

image-20220110172220424.png

image-20220110172417586.png

如图所示:我们并未得到params传递的参数

由此可知:路由跳转传参的时候,对象的写法可以是name、path形式,但是需要注意的是,path这种写法不能与params参数一起使用

所以,在此建议我们在传递params参数的时候使用name形式的对象写法

二、如何指定params参数可传可不传?

image-20220110180401171.png

image-20220110180626449.png

如图所示:我们直接没有设置params参数,但我们之前在配置路由时已经书写了路由占位符但此时查看我们的URL路径会发现问题路由占位符没有了

由此可知: 我们的路由要求传递params参数时,如果不传递,那我们的URL路径就会出现问题

image-20220110180330965.png 所以,在配置路由的时候,在路由占位符后面加上一个"?"号【params可以传递可以不传递】,此时再看我们的URL路径就没有问题了

三、params参数可以传递也可以不传递,但是如果传递是空串,如何解决?

image-20220110181440646.png

image-20220110181419399.png

如图所示:我们的URL路径又出现了问题

image-20220110182413707.png

所以:我们使用’ || ‘通过添加undefined使params参数可以传递、不传递(空的字符串),在这里URL路径又变为正常

四、路由组件能不能传递props数据?

可以并且有三种方式

1:布尔值写法

image-20220110183415515.png

通过这样我们可以得到数据,查看vue控制台我们可以看到已经获取到了props参数

image-20220110183555510.png

2:对象写法:额外的给路由组件传递一些props

image-20220110183821710.png

image-20220110184130602.png

在zxc页面我们接收这些数据

image-20220110184055728.png

3:函数写法:可以params参数、query参数,通过props传递给路由组件

props:($route)=>{
return {msg:$route.params.msg,k:$route.query.k}
}

\