在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);  
      });  
    },  
  },  
};  
</script>

var name = 'system';
import myComponent from '@/pages/components/' + name;
var route={
    name: name,
    component: myComponent
}

var name = 'system';
var route={
    name: name,
    component: () => import('../components/' + name + '.vue'); // 或者先赋值给变量 var myComponent =() => import('../components/' + name + '.vue');
}

var name = 'system';
var myComponent = resolve => require.ensure([], () => resolve(require('../components/' + name + '.vue')));
var route={
    name: name,
    component: myComponent
}

var name = 'system';
var route={
    name: name,
    component(resolve) {
        require(['../components/' + name + '.vue'], resolve)
    }
}