vue 路由里关于 TypeError: Converting circular structure to JSON 报错问题
·
首先放上报错内容
TypeError: Converting circular structure to JSON
–> starting at object with constructor ‘Object’
— property ‘_renderProxy’ closes the circle
(想标红的,但是不会)
然后说下我的报错的位置
我是想在路由里将路由的信息存到vuex里,代码如下
import store from '@/store';
router.beforeEach((to, from, next) => {
// 设置路由数据
let arr = to.matched;
store.commit("setNav", arr);
next();
});
没错就是这里出了问题
再来说下报错的原因
类型错误:将循环结构转换为JSON
上面是翻译,大概意思是说什么循环嵌套。我就直接理解为占用吧(我这只是方便理解别当真,详细原因可以自行百度,大神们解释的清楚的多)。
知道原因就好办了下面就来解决
(请直接翻到最后,这些是个傻子的操作不用管,当然原理是没错的)
router.beforeEach((to, from, next) => {
// 设置路由数据
let arr1 = to.matched;
let arr2 = [];
for (let i = 0; i < arr1.length; i++) {
arr2[i] = arr1[i];
};
store.commit("setNav", arr2);
next();
});
这是我的第二版,没错依然失败了
原因呢arr1的数据格式是这样的
[
{...},
{...},
{...},
...
]
它是一个数组,数组里是对象,我上面的做法只是还是没有完全复制一个新的出来
这就涉及到变量赋值的问题了,数组和对象都是引用传递
最后完全复制一个就能够解决
router.beforeEach((to, from, next) => {
// 设置路由数据
let arr1 = to.matched;
let arr2 = [];
for (let i = 0; i < arr1.length; i++) {
arr2[i] = { path: null, name: null };
arr2[i].path = arr1[i].path;
arr2[i].name = arr1[i].name;
};
store.commit("setNav", arr2);
next();
});
时隔几个月我又来更新了,我发现当时我就是个傻子,明明一行代码解决的问题…
router.beforeEach((to, from, next) => {
// 设置路由数据
const arr1 = to.matched;
const arr2 = JSON.parse(JSON.stringify(arr1));
store.commit("setNav", arr2);
next();
});
这就好了,原理就是把数组或对象转化成JSON(当字符串吧),然后再转回来,就成了一个新的了。。。
新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。
更多推荐


所有评论(0)