Vue路由使用参数传递数据

一、使用query参数传递数据

（一）参数的传递

1. 携带参数进行传递

<router-link to="/路径?参数名1=参数值1&参数名2=参数值2">内容</router-link>

 我们在下面的代码中传递每条消息的id和标题：

2. 配置对象进行传递 

<router-link :to="{ path:"直接路径" query:{ a:xxx, b:xxx } }">内容</router-link>

（二）接收参数

$route.query.参数

二、使用params参数传递数据

params传参就是以 /路径1/路径2/参数1/参数2 的形式来传递参数。

（一）参数的传递

1. 占位符声明params参数

在配置该路由的path配置项后使用占位符来声明params参数

path:"路径/：参数名1/：参数名2"

2. 传递参数

（1）携带参数进行传递

<router-link to="/路径/参数值1/参数值2">内容</router-link>

（2）配置对象进行传递 

注意：to配置对象中只能使用name配置项，不能使用path配置项

不知道name配置项如何使用，可以看这篇文章：

Vue多级路由的实现-CSDN博客

<router-link :to="{ name:"路由" params:{ a:xxx, b:xxx } }">内容</router-link>

3. 接收参数

$route.params.参数

4. 指定params参数可传可不传

如果我们在path中配置了占位符，但我们并没有对占位符的关键字进行params传参。

这种情况下就会出现路径错误：

我们已经跳转到了指定的组件，但是路径中并没有显示该组件对应的路径。

我们可以在占位符后加上 ? 来指定该params参数是可传可不传的 

5. 解决params参数为空串的问题

如果我们传递的params参数为空串，也会出现和上面一样的路径显示错误的问题：

我们可以使用短路运算符+undefined来解决这个问题

三、props参数

 我们在上面接收参数的时候过于繁琐，要一直写$route.quety.xxx 或 $route.params.xxx

VueRouter为我们提供了props参数来方便我们的书写。

（一）props值为对象

该对象中的所有的key-value组合都会通过props参数传递给该组件，多用于传递固定数据的场景

props:{ a:xxx, b:xxx }

（二）props值为布尔值

通过将paras设置为true，路由将所有收到的params参数通过props参数传递到组件

注意：该方法只能用于params传参的场景

paras:true

（三）props值为函数

函数返回对象中的每一组key-value都通过props的形式传递给组件

props(route) {

        return { a: route.query.xxx, b: route.query.xxx }

}