组件是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动态加载组件的四种方式

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

1、使用import导入组件，可以获取到组件

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

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

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

3、使用require 导入组件，可以获取到组件

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

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

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

以上所述就是是给大家介绍的Vue加载组件、动态加载组件的几种方式，希望对大家有所帮助。

对前端的技术，架构技术感兴趣的同学关注我的头条号，并在后台私信发送关键字：“前端”即可获取免费的架构师学习资料

知识体系已整理好，欢迎免费领取。还有面试视频分享可以免费获取。关注我，可以获得没有的架构经验哦！！