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