JSON序列化与反序列化在vue中的应用

需求：

A页面跳转到B页面，需要将参数携带过去，并且刷新页面也正常显示，参数格式如下：(对象嵌套数组)

"data": {
    "page": 0,
    "pageSize": 100,
    "total": 87,
    "list": [
      {
        "id": 1061,
        "orderTime": 1581905690803,
        "total": 40,
        "status": "待派单",
        "remark": null,
        "customerId": 26,
        "waiterId": null,
        "addressId": 2228
      }
     ]
}

方法：

使用JSON序列化与反序列化

A页面：

使用JSON.stringify序列化

B页面：

JSON.parse反序列化

页面效果：

 

---

注：如果不适用JSON序列化，直接使用query传递参数，效果如下：

A页面：

B页面：

页面效果：

第一次点击进入B页面时：

在B页面刷新浏览器：

 

很明显，页面的数据不是我们想要的格式，所以直接使用query传递参数不可取（当然，前提是传递的参数格式是否是对象嵌套数组）