详解Vue组件动态加载有哪些方式

const AsyncComponent = () => import('./components/MyComponent.vue');

export default {
  components: {
    AsyncComponent
  }
}

import { defineAsyncComponent } from 'vue';

const AsyncComponent = defineAsyncComponent(() => import('./components/MyComponent.vue'));

export default {
  components: {
    AsyncComponent
  }
}

const AsyncComponent = () => import(/* webpackChunkName: "my-component" */ './components/MyComponent.vue');

const routes = [
  {
    path: '/my-component',
    component: () => import('./components/MyComponent.vue')
  }
];

<template>
  <component :is="currentComponent"></component>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'AsyncComponent'
    };
  },
  components: {
    AsyncComponent: () => import('./components/MyComponent.vue'),
    AnotherComponent: () => import('./components/AnotherComponent.vue')
  }
}
</script>

<template>
  <button @click="loadComponent">Load Component</button>
  <component v-if="isComponentLoaded" :is="dynamicComponent"></component>
</template>

<script>
export default {
  data() {
    return {
      isComponentLoaded: false,
      dynamicComponent: null
    };
  },
  methods: {
    loadComponent() {
      this.isComponentLoaded = true;
      this.dynamicComponent = () => import('./components/MyComponent.vue');
    }
  }
}
</script>

const store = new Vuex.Store({
  state: {
    componentLoaded: false
  },
  mutations: {
    loadComponent(state) {
      state.componentLoaded = true;
    }
  }
});

// 组件部分
<template>
  <component v-if="$store.state.componentLoaded" :is="dynamicComponent"></component>
</template>

<script>
export default {
  computed: {
    dynamicComponent() {
      return () => import('./components/MyComponent.vue');
    }
  }
}
</script>