Vue loads components, several ways to dynamically load components

What is component:

The component is one of the most powerful features of Vue.js. Components can extend HTML elements, encapsulate reusable code. On the higher level, the component is a custom element, and the Vue.js compiler adds special functions to it. In some cases, the components may also be in the form of native HTML elements, extension in IS characteristics.

Next, a simple code gives you a few ways to load the components. The specific code is as follows:

 // Normal loading Import Index from FROM '../pages/index.vue'Import view from' ../pages/view.vue'// Lazy load const index = resolve => Require (['../ pages / index.vue'], resolve) Const view = resolve => Require (['../ pages / view.vue'], resolve) // Lazy loading - Press Group const index = r => Require.ensure ([], () => R (Require ('../pages/index.vue')), 'group-index') const view = r => Require.ensure ([], () => r (required ('../ pages / view.vue '),' Group-view ') // Lazy loading - Press Group Import, ES6 IMPORT - based Features const index = () => import (' ../ pages / index.vue ') const view = () = > import ('../ pages / view.vue')   
Supplement: VUE

1, use the import import assembly, can be obtained

VAR name = ‘system’; var mycomponent = () => import (‘../ Components /’ + Name + ‘.vue’); var Route = {NAME: Name, Component: MyComponent}
  2, use the import import assembly, directly assign the component to Componet  

VAR Name = ‘system’; var route = {name: name, component :() => import (‘../ Components /’ + Name + ‘.Vue’);}

  3, use the Require import component, you can get the component  

VAR name = ‘system’; var mycomponent = resolve => required.ensure ([], () => resolve (Require (‘../ Components /’ + Name + ‘.Vue’)))); var Route = {name: name, component: mycomponent}

  4. Use the Require to import the component, directly assign the component to Componet  

VAR NAME= ‘system’; var route = {name: name, component (resolve) {required ([‘../ Components /’ + Name + ‘.Vue’], resolve)}}

The above is the VUE load assembly that Xiaobian introduced, and dynamically loads the components. I hope that everyone can help, if everyone If you have any questions, please leave a message, the small package will reply to everyone in time. Thank you very much for your support of Tumi Cloud Website!

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment