Component is one of the most powerful features of Vue.js. Components can extend HTML elements and encapsulate reusable code. At a higher level, components are custom elements for which the compiler of Vue.js adds special features. In some cases, components can also be in the form of native HTML elements, extended with the is feature.

Here is a simple code to introduce several ways of Vue loading components. The specific code is as follows:

//Normal loading  
import index from '../pages/index.vue'  
import view from '../pages/view.vue'  
//Lazy loading  
const index = resolve => require(\['../pages/index.vue'\], resolve)  
const view = resolve => require(\['../pages/view.vue'\], resolve)  
//Lazy load \ - by group  
const index = r => require.ensure(\[\], () => r(require('../pages/index.vue')), 'group-index')  
const view = r => require.ensure(\[\], () => r(require('../pages/view.vue')), 'group-view')  
// Lazy load \ - import by group, based on the features of ES6 import  
const index = () => import('../pages/index.vue')  
const view = () => import('../pages/view.vue')  

Add: four ways for Vue to dynamically load components

There are four ways to dynamically load components:

1. Using import to import components, you can get components

var name = 'system';  
var myComponent =() => import('../components/' + name + '.vue');  
var route={//Front end full stack development exchange learning circle: 866109386  
  name:name,//Help front-end personnel for 1-3 years, refresh technical thinking  
  component:myComponent  
}  

2. Use import to import components and assign components to component directly

var name = 'system';  
var route={//Front end full stack development exchange learning circle: 866109386  
  name:name,//Help front-end personnel for 1-3 years, refresh technical thinking  
  component :() => import('../components/' + name + '.vue');  
}  

3. Use require to import components to obtain components

var name = 'system';  
var myComponent = resolve => require.ensure(\[\], () => resolve(require('../components/' + name + '.vue')));  
var route={//Front end full stack development exchange learning circle: 866109386  
  name:name,//Help front-end personnel for 1-3 years, refresh technical thinking  
  component:myComponent  
}  

4. Use require to import components and assign components to component directly

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

The above is to introduce several ways of Vue loading components and dynamic loading components, hoping to help you.