记一次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数据，因此可以安全地序列化它。

来源：https://juejin.cn/post/7222253330504368184