在Vue中，你可以使用动态import()语法来动态加载组件，动态变量路径

在Vue中，你可以使用动态import()语法来动态加载组件。动态导入允许你在需要时异步加载组件，这样可以提高应用程序的初始加载性能。

下面是一个使用动态导入加载组件的示例：

<template>  
  <div>  
    <button @click="loadComponent">加载组件</button>  
    <component :is="dynamicComponent"></component>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      dynamicComponent: null,  
    };  
  },  
  methods: {  
    loadComponent() {  
      // 动态导入固定组件  
      import('./MyComponent.vue').then((module) => {  
        // 成功导入后，将组件注册到Vue实例中  
        this.dynamicComponent = module.default;  
      }).catch((error) => {  
        // 处理导入失败的情况  
        console.error('组件加载失败:', error);  
      });  
    }, 
    
    loadComponent1(webUrl) {
      console.log(webUrl)
      // console.log(new URL(webUrl))
      // 动态导入动态组件   webUr是一个动态变量
      import('@/views/'+webUrl).then((module) => {
        // 成功导入后，将组件注册到Vue实例中  
        this.dynamicComponent = module.default;
        console.log(1111111, this.dynamicComponent)
      }).catch((error) => {
        // 处理导入失败的情况  
        console.error('组件加载失败:', error);
      });
    }
  },  
};  
</script>

在上面的示例中，当你点击"加载组件"按钮时，loadComponent方法会通过动态导入加载MyComponent.vue组件。导入成功后，将组件注册到Vue实例的dynamicComponent属性中，然后使用标签来渲染该组件。

请注意，动态导入是一个返回Promise的函数，因此你可以使用.then()来处理导入成功的情况，并使用.catch()来处理导入失败的情况。