Vue加载组件、动态加载组件的几种方式

组件是Vue.js最强大的功能之一。组件能够扩展HTML元素，封装可重用的代码。这篇文章经过实例代码给你们介绍了Vue加载组件、动态加载组件的几种方式，须要的朋友参考下吧
什么是组件：

组件是Vue.js最强大的功能之一。组件能够扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些状况下，组件也能够是原生HTML元素的形式，以is特性扩展。

下面一段简单的代码给你们介绍Vue加载组件的几种方式，具体代码以下所示：

//正常加载  
import index from '../pages/index.vue'  
import view from '../pages/view.vue'  
//懒加载  
const index = resolve => require(\['../pages/index.vue'\], resolve)  
const view = resolve => require(\['../pages/view.vue'\], resolve)  
//懒加载 \- 按组  
const index = r => require.ensure(\[\], () => r(require('../pages/index.vue')), 'group-index')  
const view = r => require.ensure(\[\], () => r(require('../pages/view.vue')), 'group-view')  
// 懒加载 \- 按组 import，基于ES6 import的特性  
const index = () => import('../pages/index.vue')  
const view = () => import('../pages/view.vue')

补充：Vue动态加载组件的四种方式

动态加载组件的四种方式：

一、使用import导入组件，能够获取到组件

var name = 'system';  
var myComponent =() => import('../components/' + name + '.vue');  
var route={//前端全栈开发交流学习圈：866109386  
  name:name,//帮助1-3年前端人员，提神技术思惟  
  component:myComponent  
}

二、使用import导入组件，直接将组件赋值给componet

var name = 'system';  
var route={//前端全栈开发交流学习圈：866109386  
  name:name,//帮助1-3年前端人员，提神技术思惟  
  component :() => import('../components/' + name + '.vue');  
}

三、使用require 导入组件，能够获取到组件

var name = 'system';  
var myComponent = resolve => require.ensure(\[\], () => resolve(require('../components/' + name + '.vue')));  
var route={//前端全栈开发交流学习圈：866109386  
  name:name,//帮助1-3年前端人员，提神技术思惟  
  component:myComponent  
}

四、使用require 导入组件，直接将组件赋值给componet

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

以上所述就是是给你们介绍的Vue加载组件、动态加载组件的几种方式，但愿对你们有所帮助。