Vue路由使用参数传递数据

一、使用query参数传递数据

（一）参数的传递

1. 携带参数进行传递

内容

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

2. 配置对象进行传递 

内容

（二）接收参数

$route.query.参数

二、使用params参数传递数据

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

（一）参数的传递

1. 占位符声明params参数

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

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

2. 传递参数

（1）携带参数进行传递

内容

（2）配置对象进行传递 

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

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

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

内容

3. 接收参数

$route.params.参数

 

三、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 }

}

 

​​​​​​​