首先放上报错内容

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(当字符串吧),然后再转回来,就成了一个新的了。。。

GitHub 加速计划 / js / json
41.72 K
6.61 K
下载
适用于现代 C++ 的 JSON。
最近提交(Master分支:1 个月前 )
960b763e 4 个月前
8c391e04 6 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐