vue3 怎么使用动态import按需加载组件?

component: (resolve) => require([`@/views${data.path}.vue`], resolve)

在vue cli4.x , Router4创建的项目。

在做按需加载组件时,component: (resolve) => require([`@/views${data.path}.vue`], resolve),组件需要根据后台传入的地址进行加载,也就是动态import语法,这样webpack编译时能够找到相应的组件。但是上面这种写法在编译时,发现控制台报错No match found for location with path,总是匹配不到路径。经过测试后,确定以上写法有问题,但是不知道怎么改?求大神指点。谢谢

 

先谢谢了。我的控制台报错是这样的,不知道是哪个地方出了问题。

找到解决办法了吗

 

 

import Vue from 'vue'
import {
  Button,
  Form,
  FormItem,
  Input,
  Message,
  Container,
  Header,
  Aside,
  Main,
  Footer,
  Menu,
  Submenu,
  MenuItemGroup,
  MenuItem,
  table,
  tableColumn,
  breadcrumb,
  breadcrumbItem,
  card,
  Row,
  Col,
  Switch,
  tooltip,
  pagination,
  Dialog,
  MessageBox,
  Tag
} from 'element-ui'

// 挂载到Vue上$message是自定义属性
Vue.prototype.$message = Message
Vue.prototype.$confirm = MessageBox.confirm

// 注册全局组件
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)
Vue.use(Footer)
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItemGroup)
Vue.use(MenuItem)
Vue.use(table)
Vue.use(tableColumn)
Vue.use(breadcrumb)
Vue.use(breadcrumbItem)
Vue.use(card)
Vue.use(Row)
Vue.use(Col)
Vue.use(Switch)
Vue.use(tooltip)
Vue.use(pagination)
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Dialog)
Vue.use(Tag)