【Vue】解决报错nonIterableSpread.js:2 Uncaught TypeError: Invalid attempt to spread...

547 阅读1分钟

问题描述:

在项目开发分模块拆分路由时,新建了一个路由模块时,控制台报错:

image.png

问题排查:

首先来看一下配置的js

import Vue from 'vue'
import VueRouter from 'vue-router'

const req = require.context('@/router/modules',false, /\.js$/)
const requireAll = requireContext => {
    return requireContext.keys().map(requireContext);
}
var arr = []
requireAll(req).forEach(item => {
  console.log(item);
  arr = [...arr,...item.default]
  // arr = arr.concat(item.default)
  
})
Vue.use(VueRouter)

const routes = [
  ...arr
]

const router = new VueRouter({
  routes
})

router.beforeEach((to,from,next)=>{
  document.title = to.meta.title
  next()
})

export default router

根据报错信息,item.default 是一个非可迭代的对象,无法直接使用扩展运算符来展开。那么可以定位到动态数组合并时出错,为了解决这个问题,可以使用 concat 方法将其合并到 arr 中

也就是把这一行修改

arr = [...arr,...item.default]

更正为:

arr = arr.concat(item.default)

问题解决