通过Vue传递参数可以分为两种方式:params参数
query参数
params参数
params参数传递方式分两种:路由配置参数
使用$router的push编程式添加
路由配置参数
在路由中配置如下:{
path: '/user/:id',
name: 'user',
component: UserDetail
}
:id为路径里的参数。传递参数:this.$router.push({path: `/user/${id}`})
router.push添加params参数
路由配置:{
path: '/user',
name: 'user',
component: UserDetail
}
传递参数this.$router.push({
name: 'user',
params: {
id: id
}
})
这里需要注意的是:这种方式传递参数,push的对象只能是命名的路由。如果push的配置对象使用path,那么params参数会被忽略。
获取参数
不管是在路由配置params参数还是通过router.push()编程式传递参数,这些参数都是可以通过params来获取。this.$router.params.id
查询参数
查询参数类似于在路径上添加查询字符串:/user?id=123
传递参数this.$router.push({
path: '/user',
query: {
id: id
}
})
获取参数
使用查询参数传递参数,需要使用router.query来获取参数。$route.query.id