vue实战-路由传递参数

vue实战-路由传递参数

前言问题

1）路由跳转有几种方式？

1：声明式导航：router-link（务必要带有to属性），可以实现路由的跳转
2：编程式导航：利用的是组件实例的$router.push | replace方法，可以实现路由的跳转。（还可以写一些自己的业务）

2）路由传参，参数有几种写法？

1：params参数：属于路径当中的一部分，需要注意，在配置路由的时候，需要占位
2：query参数：不属于路径当中的一部分，类似于ajax中的queryString /home?k=v&kv=,不需要占位

1.路由传递参数（搜索框）

1）首先在input处设置双向绑定，并定义一个数据接收

设置一个接收参数是为了能在回调函数中使用并传到search页面。

2）使用编程式导航方法跳转并传递参数

在回调函数内使用编程式导航，携带params和query参数，使用对象传递法（常用）。
**若要传递params参数，对象内的属性不能是path而应是name，**所以需要在router那设置Search组件路由跳转的name。

对象法传参：

 this.$router.push({
   name:'search',
   params:{keyword:this.keyword},
   query:{k:this.keyword.toUpperCase()}
 })
1
2
3
4
5

另外两种不常用的方法

3）在路由组件Search处验证测试是否传参成功

测试结果

成功传参啦！

2.路由传参相关面试题

1）路由传递参数（对象写法）path是否可以结合params参数一起使用？

否,params参数只能与name一起使用.

2）如何指定params参数可传可不传？

在配置路由时,在占位的后面加上一个问号[params可以传递或者不传递]

3）params参数可以传递也可以不传递，但是如果传递是空串，如何解决？

使用undefined解决

4）路由组件能不能传递props数据？

可以,三种方式
1:布尔值写法:params
在router中配置props:true

在search组件中配置props参数

测试

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




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