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動態加載組件的四種方式

動態加載組件的四種方式：

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加載組件、動態加載組件的幾種方式，希望對大家有所幫助。

對前端的技術，架構技術感興趣的同學關注我的頭條號，並在後臺私信發送關鍵字：“前端”即可獲取免費的架構師學習資料

知識體系已整理好，歡迎免費領取。還有面試視頻分享可以免費獲取。關注我，可以獲得沒有的架構經驗哦！！

閱讀更多 前端全棧架構丶 的文章

關鍵字: 技術 HTML 幾種