Vue路由传参,刷新页面，参数变成[Object object]

通常我们需要通过路由携带需要传递的参数，有以下三种写法：
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