谈谈vue路由传参的3种方式---以及相关面试题

上篇说过路由跳转有两种方式（<router-link>和this.$router.push|replace）

总观路由传参，参数有query和params两种写法，如下图，接下来说一下各自应用，用编程式导航举例为主，声明式导航在to里传参（这里不做演示），都用的模板字符串

需求：在首页面/点击搜索按钮后跳转到search页面并且传参

看代码(已经声明过双向数据绑定，文本框值为keyword)

1.query传参 

类似于ajax的get方式的拼接参数（符号：？= &） eg：/home?a=q&b=p

特点：刷新不会丢失数据，但是参数会以?a=hhh的格式拼接显示在url里面）

2.params传参，和路径相似(在/后面写)

注意：在配置路由时候，需要使用动态路由进行占位

特点：刷新数据不会丢失，会以/search/HHH格式拼接显示在url里面）

在代码中最常用的传参方式使用params和query的对象传参，但是一定要给路由起名字

3.props传参

（1）布尔值

通过设置路由index.js中 路由的属性 props：true，实现将prams参数（只能是params参数）作为路由组件身上的属性，在组件中通过声明props属性，可以在页面用{{}}语法渲染

（2）对象

和布尔值一样，也是在路由中写 props:{a:1,b:2}(参数是自己像额外给路由组件传递的一些属性)，同理在组件中接收并渲染

（3）函数（不是很常用 简单说一下）

 访问方式用上。

我也找到了一个博主写的比较好的铁子，给大家放这里

路由三种传参方式_不及你笑靥如花的博客-CSDN博客_路由之间如何传参

路由传递参数先关面试题（来自尚硅谷课程，路由传递参数部分）

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

     不可以：不能这样书写，因为其不会跳转也不会传参，代码报错（底部应有的footer未渲染，rr参数未传入，且报错）

 

亲测：在路由跳转加上name:'/search'又可以了

2:如何指定params参数可传可不传?

前情：因为在用param传参时候，会使用动态路由进行占位

那么要是不传param参数而只传query参数，如下

则会出现路径跳转错误，本该跳转到/search/k=fff,现在出现如下图地址，可见路径传输错误

那么如何指定params参数可传可不传

答：只需要在写动态路由时候后面加上?(正则表达式？表示出现0次或1次)表示可传可不传

 

写了可传可不传 ？ 下面只传query参数，不传params参数

如下：地址显示完全 问题解决

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

传空串代码示例：

url不会显示跳转到search页面，只会有query参数

 解决方法：使用undefined解决params传递空串问题

用undefined解决不显示search问题

 

4:如果指定name与params配置, 但params中数据是一个"", 无法跳转，路径会出问题

如下：不会进行传参