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加載組件、動態加載組件的幾種方式，但願對你們有所幫助。