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傳遞參數不可取（當然，前提是傳遞的參數格式是否是對象嵌套數組）