vue import(变量) 出错用require代替
最近在做一个项目,搭建项目的时候,有一个需求是动态引入菜单,也就是每一个角色的路由都是通过后台获取后再通过addRoutes注册,从中就遇到了问题。
我们知道,一个路由,需要先引入组件,例如 import xxx from ‘@/views/xxx’ ,component:xxx 这样,也就是component后面的值是一个组件,而不是”xxx“一个字符串,但是现在问题是,我从后端请求回来的是肯定是关于组件存放位置的字符串,不是该组件!
所以怎么根据组件存放信息的字符串去引入对应的组件呢,我们肯定想到了import ,但是webpack 却规定了,import() 括号里跟的不能是变量,这个犯难了,所以该怎么办?
我们其实用require代替,
新建一个文件,import.js,
module.exports = file => require('@/views/' + file + '.vue').default
在你导入路由的文件 写入
const _import = require('./import.js)
然后这样使用
route['component'] = _import(`modules/${menuList[i].url}`) || null
就可以了