关于VUE报错“TypeError: Converting circular structure to JSON“

最新推荐文章于 2025-03-28 11:42:31 发布

白衣无暇

最新推荐文章于 2025-03-28 11:42:31 发布

阅读量5.7k

点赞数 1

分类专栏： vue 文章标签： vue.js json 前端

本文链接：https://blog.youkuaiyun.com/liuwanying0226/article/details/131655951

版权

vue 专栏收录该内容

2 篇文章

订阅专栏

文章讨论了在Vue应用中遇到TypeError:ConvertingcircularstructuretoJSON错误的原因，该错误通常发生在尝试将包含循环引用的对象转换为JSON时。解决方案包括使用JSON.parse和JSON.stringify来打破循环引用，或者自定义stringify方法，通过全局缓存变量来处理对象。通过这种方法，可以避免在路由传递或处理复杂数据结构时出现此类错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于VUE报错“TypeError: Converting circular structure to JSON"

问题：

[Vue warn]: Error in nextTick: "TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Vue'
    |     property '$options' -> object with constructor 'Object'
    |     property 'router' -> object with constructor 'VueRouter'
    --- property 'app' closes the circle"

翻译过来则是存在循环引用。

代码报错位置不能显式看到循环引用，因为循环引用的代码不是自己写的，而是框架代码自己实现的，因此发现问题的产生地方更难一点。以下是在路由中传递使用to from时导致循环引用得问题。
在这里插入图片描述
解决方案

原理就是把数组或对象转化成JSON，然后再转回来，对于属性值转换

JSON.parse(JSON.stringify(body.config.baseURL))

对于对象整体转换，通过自定义stringify方法，设置一个全局缓存变量，stringify的第二个参数如果是function时，他会传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：“”

//循环引用转换
                var str = [];
                var cache = JSON.stringify(eventData, function (key, value) {
                    if (typeof value === 'object' && value !== null) {
                        if (str.indexOf(value) !== -1) {
                            return;
                        }
                        str.push(value);
                    }
                    return value;
                });
                str = null;