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

 更新时间:2023年04月16日 16:58:20   作者:daytoywhy  
本文主要介绍了记一次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序列号报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue极简生成器 Vuepress的实现

    Vue极简生成器 Vuepress的实现

    本文主要介绍了Vue极简生成器 Vuepress的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧<BR>
    2022-06-06
  • 关于vue 项目中浏览器跨域的配置问题

    关于vue 项目中浏览器跨域的配置问题

    这篇文章主要介绍了vue 项目中浏览器跨域的配置问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-11-11
  • vue实现简单的登录弹出框

    vue实现简单的登录弹出框

    这篇文章主要为大家详细介绍了vue实现简单的登录弹出框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • Vue 框架之键盘事件、健值修饰符、双向数据绑定

    Vue 框架之键盘事件、健值修饰符、双向数据绑定

    这篇文章主要介绍了Vue 框架之键盘事件、健值修饰符、双向数据绑定问题,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • Vue全局变量的定义及使用方法

    Vue全局变量的定义及使用方法

    这篇文章主要给大家介绍了关于Vue全局变量的定义及使用的相关资料,定义完全局变量后,我们可以在程序中的任何地方使用它们,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-09-09
  • Vue3+Element Plus实现el-table跨行显示(非脚手架)

    Vue3+Element Plus实现el-table跨行显示(非脚手架)

    这篇文章主要介绍了Vue3+Element Plus实现el-table跨行显示(非脚手架),本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • vue任意关系组件通信与跨组件监听状态vue-communication

    vue任意关系组件通信与跨组件监听状态vue-communication

    这篇文章主要介绍了vue任意关系组件通信与跨组件监听状态vue-communication,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • vue.set向对象里增加多层数组属性不生效问题及解决

    vue.set向对象里增加多层数组属性不生效问题及解决

    这篇文章主要介绍了vue.set向对象里增加多层数组属性不生效问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • VUE重点问题总结

    VUE重点问题总结

    本篇内容给大家总结了VUE的重要难点,并把代码做了详细分享,有兴趣的朋友参考学习下。
    2018-03-03
  • Vue自定义多选组件使用详解

    Vue自定义多选组件使用详解

    这篇文章主要为大家详细介绍了Vue自定义多选组件的使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09

最新评论