问题描述:
在项目开发分模块拆分路由时,新建了一个路由模块时,控制台报错:
问题排查:
首先来看一下配置的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)
问题解决