Vue中$route序列號報錯怎么解決

本文小編為大家詳細介紹“Vue中$route序列號報錯怎么解決”，內容詳細，步驟清晰，細節處理妥當，希望這篇“Vue中$route序列號報錯怎么解決”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

由于Vuex在瀏覽器刷新是會丟失數據，所以我在項目里使用了Vuex持久化存儲的功能，我這邊實現的方案是監聽頁面刷新的事件，將Vuex中的數據存到sessionStorage中，在頁面初始化的時候再將sessionStorage中的數據設進Vuex中，具體代碼如下

create(){
      //在頁面加載時讀取sessionStorage里的狀態信息
    if (sessionStorage.getItem("store")) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(sessionStorage.getItem("store"))
        )
      );
       sessionStorage.removeItem("store");
    }

    //在頁面刷新時將vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("store", JSON.stringify(this.$store.state));
    });
}

這樣一個簡單的Vuex持久化儲存的功能就實現了，瀏覽器刷新后我們也能讀取到Vuex中儲存的數據，但是突然有一天，這個功能失效了，頁面也沒有報錯，經過我的一番摸索，最終將問題鎖定在了Vuex中儲存的$route對象上

$Route路由對象屬性

$Route對象上有以下這幾個屬性

• path：字符串，對應當前路由的路徑，總是解析為絕對路徑，如 "/foo/bar"

• params：一個 key/value 對象，包含了動態片段和全匹配片段，如果沒有路由參數，就是一個空對象

• query：一個 key/value 對象，表示 URL 查詢參數。例如，對于路徑 /foo?user=1，則有 $route.query.user == 1，如果沒有查詢參數，則是個空對象

• hash：當前路由的 hash 值 (帶 #) ，如果沒有 hash 值，則為空字符串

• fullPath：完成解析后的 URL，包含查詢參數和 hash 的完整路徑

• matched：一個數組，包含當前路由的所有嵌套路徑片段的路由記錄 。路由記錄就是 routes 配置數組中的對象副本 (還有在 children 數組)

問題就出在了$route這個路由對象上，我們在頁面刷新時要將Vuex中的數據轉換成字符串，再進行儲存

    //在頁面刷新時將vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("store", JSON.stringify(this.$store.state));
    });

而store中如果有$route就會報錯，這是因為$route包含了一些非序列話的屬性，例如函數、循環引用等；
當使用JSON.stringify($route)時，可能會報錯TypeError: Converting circular structure to JSON，這是因為$route對象包含循環引用，即對象內部存在相互引用，導致JSON.stringify()無法序列化這個對象，從而拋出這個錯誤。

解決方法

為了解決這個問題，你可以將$route對象轉換成一個新的純JavaScript對象，然后再進行序列化。可以使用Object.assign()方法來實現這一點，如下所示：

JSON.stringify(Object.assign({}, $route))

這個方法會創建一個新的JavaScript對象，將$route的屬性復制到這個新對象中，并返回這個新對象。由于這個新對象只包含純JavaScript數據，因此可以安全地序列化它。

讀到這里，這篇“Vue中$route序列號報錯怎么解決”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。