vue2.js 按需加载

// router.js
import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: () => import('./components/Home.vue')
    },
    {
      path: '/about',
      name: 'About',
      component: () => import('./components/About.vue')
    }
  ]
});

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

<script>
export default {
  data() {
    return {
      componentLoaded: false,
      dynamicComponent: null
    };
  },
  methods: {
    async loadComponent() {
      const component = await import('./DynamicComponent.vue');
      this.dynamicComponent = component.default;
      this.componentLoaded = true;
    }
  }
};
</script>