query传对象参数刷新后数据变化问题

遇到问题是query传对象参数后，刷新新页面，数据变化为"[object Object]"

先来回顾一下vue路由传参方式

第1种方法。使用path来匹配路由，然后通过query来传递参数

这种情况下 query传递的参数会显示在url后面?id=？ 页面刷新数据不会丢失

this.$router.push({
  name: 'more',
  query: {
    value: ‘
  }
})

在另一页this.$route.qurey.value取值

第2种方法。使用path来匹配路由，然后通过params来传递参数 但是页面刷新数据会丢失！！！

       this.$router.push({
          name: 'more',
          params: {
            value: this.value
          }
        })

在另一页this.$route.params.value取值

如果想用第二种方法传，而且还要刷新数据不丢失，

那么第3种方法需要在路由里配置

需要在path中添加/:id来对应 $router.push 中path携带的参数

{
  path: '/more/:value',
  name: 'more',
  meta: {
    title: '查看更多'
  },
  component: () => import('@/views/pages/more')
},

刷新后数据不会丢失 但是发现url上又显示出传参了🤪

这时可以用到vuex

回到问题，这几种都是参数不多的情况，那么我要传个对象呢，可以看到第一次能拿到值

但是刷新后

数据变化为"[object Object]"

so 传参前先转为字符串

JSON.stringify(data)

拿到值再

JSON.parse(data)