一、使用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.参数
三、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 }
}