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序列号报错怎么解决的详细内容，更多关于Vue中$route序列号报错怎么解决的资料请关注九品源码其它相关文章！