记一次Vue中$route序列号报错

目录

• $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序列号报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！