// 这样引入携带有变量的组件可能会报错(Error:Unknown variable dynamic import)
import(`../../components/${element.src}/components-index.vue`)
    .then((myModule) => {
      asyncComponent.value = myModule.default
    })
    .catch((_err) => {
      console.log('动态加载菜单失败', _err)
    })

 <component :is="asyncComponent" />

// 正确写法
let modules = import.meta.glob('../../components/**/**/*.vue') // 获取到所有组件的路径

const comp = modules[`../../components/${element.src}/components-index.vue`]
// comp 打印出来是个promise

   comp().then((myModule) => {
   asyncComponent.value = myModule.default
  }).catch(() => {
  
  })

<component :is="asyncComponent" />
// 这么写就可以正确引用出动态组件了

Logo

前往低代码交流专区

更多推荐