通常我们需要通过路由携带需要传递的参数,有以下三种写法:
1、地址后面直接带查询参
如果我们只需要传递一个简单的参数,可以采取这种写法,在路由配置中配置查询参,路由跳转时添加查询参
配置如下:
{
path: '/test/:id',
name: 'test',
component: Test
}
跳转如下:
this.$router.push({
path: `/test/${id}`
})
接收参数:
this.$route.params.id
2、params传参
this.$router.push({
name: `test`,
params: {
a: 1,
b: 2
}
})
接收参数:
this.$route.params.a
this.$route.params.b
3、query传参
this.$router.push({
path: `/test`,
query: {
a: 1,
b: 2
}
})
接收参数:
this.$route.query.a
this.$route.query.b
query和params传参的时候,每一个参数应该以字符串形式传入,如果传一个对象,会被强制准转换为字符串[object Object],点击进入路由可以获取对象的值,但是刷新页面会导致获取不到对象值。我们可以通过JSON.stringify()解决问题,下面以query为例
//传递参数
let obj = {
a: 1,
b: 2
}
this.$router.push({
path: `/test`,
query: {
a: 1,
obj: JSON.stringify(obj)
}
})
//接收参数
let a = this.$route.query.a
let obj = JSON.parse(this.$route.query.obj)
params同query