vue路由传参有3种形式：params、query和props。本篇文章我们先来回顾一下前两种，着重讲解第三种。
params形式
这种形式，在路由定义时就约定了参数名称和位置。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。
举个例子
定义路由
1
2
3
4
5
6
7
| ...
{
name:'user',
path: '/user/:id',
component: User
}
...
|
传递参数
- 链接式
1
2
3
4
5
6
| // 绑定对象的形式
<router-link :to="{ name: 'user', params: { id: 9527 }}">User</router-link>
// 字符串拼接的形式
<router-link to="/user/0527">User</router-link>
|
- 编程式
1
2
3
4
5
6
| this.$router.push({
name:'user',
params:{
id:9527
}
});
|
不推荐使用path传递参数：
1
2
3
| this.$router.push({
path:'/user/9527',
});
|
URL表现
1
| http://localhost/#/user/9527
|
或者
1
| http://localhost/user/9527
|
获取参数
1
| let userId=this.$route.params.id
|
query形式
这种形式，路由地址后会带查询参数。当匹配到一个路由时，参数值会被设置到 this.$route.query，可以在每个组件内使用。
定义路由
1
2
3
4
5
6
7
| ...
{
name:'user',
path:'/user',
component: User
}
...
|
传递参数
- 链接式
1
2
3
4
5
6
| // 绑定对象的形式
<router-link :to="{ name: 'user', query: { id: 9527 }}">User</router-link>
// 字符串拼接的形式
<router-link to="/user?id=0527">User</router-link>
|
- 编程式
1
2
3
4
5
6
| this.$router.push({
name:'user',
query:{
id:'9527'
}
});
|
URL表现
1
| http://localhost/#/user?id=9527
|
或者
1
2
| http://localhost/user?id=9527
|
获取参数
1
| let userId=this.$route.query.id
|
props形式
上面两种形式，组件中都需要通过$route获取参数，产生了耦合。我们知道组件是可以通过props获取外部参数的，那么有没有可能把路由中的参数自动转换为组件的props参数呢？本节就讲解如何实现，官方文档称之为“路由组件传参”。有以下3种实现方式：
- 布尔模式
把route.params转换为传递给组件的参数。
1
2
3
4
5
6
| {
name:'user',
path: '/user/:id',
component: User，
props:true
}
|
- 对象模式
在路由中定义个对象，作为传递给组件的参数。一般很少用。
1
2
3
4
5
6
| {
name:'user',
path: '/user',
component: User，
props:{id:9527}
}
|
- 函数模式
在路由中第一个函数，它的返回值作为传递给组件的参数。
1
2
3
4
5
6
| {
name:'user',
path: '/user',
component: User，
props: route => ({ id: route.query.id+1 })
}
|
总结
路由传参本质只有两种，一种通过约定url中参数的位置和名称实现；另一种通过url中的查询键值对实现。前者就是本文的params形式，后者是query形式。
路由另外提供了将路由参数转换为组件参数的方式，就是本文中的props形式。
尽管可以拼接url实现路由跳转，但是不推荐，因为不但易错，而且会丢失参数原始类型。