vue使用query传对象页面刷新数据丢失问题

问题

路由中的query传参，页面刷新后应该是还在的，但是如果传递的是数组或对象，那么他就会变成：【object object 】这是因为他给转成字符串了，解决方式也很简单，在你要传参的地方用JSON.stringify(),接收数据的地方用JSON.parse（），就可以解决这个问题。

父组件

<template>
    <div
      class="mainContainer"
      v-for="(item, index) in informationData" :key="index">
      <div
        id="index"
        class="headerLeftBox ConBox"
        @click="BoxClick('/refer/commoditytype', JSON.stringify(item))"
        style="font-size:24px; cursor:pointer;"
      >
      <img :src="item.src" alt="">
        {{ item.name }}
      </div>
    </div>
 </template>
 export default {
  data() {
    return {
             informationData: [
			        {
			          id: 1,
			          name: "超级大乐透",
			          content: "超级大乐透X",
			          src:require('../../assets/img/logo_dlt.png')
			        },
			        {
			          id: 2,
			          name: "七星彩",
			          content: "七星彩X",
			           src:require('../../assets/img/logo-7xc.png')
			        }
			     ]
             }
        },
        methods:{
               BoxClick(route, item) {
			      this.$router.push({
			        path: route,
			        query: {
			          items: item,
                        },
                  });
              },
        }
  }

子组件

  methods: {
    init() {
      this.contentData = JSON.parse(this.$route.query.items);
      this.$route.meta.title = `${this.contentData.name}详情`;
    },
  },