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