什么是組件：

組件是Vue.js最強(qiáng)大的功能之一。組件可以擴(kuò)展HTML元素，封裝可重用的代碼。在較高層面上，組件是自定義的元素，Vue.js的編譯器為它添加特殊功能。在有些情況下，組件也可以是原生HTML元素的形式，以is特性擴(kuò)展。

下面一段簡單的代碼給大家介紹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')

補(bǔ)充：Vue動態(tài)加載組件的四種方式

動態(tài)加載組件的四種方式：

1、使用import導(dǎo)入組件，可以獲取到組件

var name = 'system';var myComponent =() => import('../components/' + name + '.vue');var route={  name:name,  component:myComponent}

2、使用import導(dǎo)入組件，直接將組件賦值給componet

var name = 'system';var route={  name:name,  component :() => import('../components/' + name + '.vue');}

3、使用require 導(dǎo)入組件，可以獲取到組件

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

4、使用require 導(dǎo)入組件，直接將組件賦值給componet

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

總結(jié)

以上所述是小編給大家介紹的Vue加載組件、動態(tài)加載組件的幾種方式，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對錯新站長站網(wǎng)站的支持！