什么是組件：
組件是Vue.js最強(qiáng)大的功能之一。組件可以擴(kuò)展HTML元素，封裝可重用的代碼。在較高層面上，組件是自定義的元素，Vue.js的編譯器為它添加特殊功能。在有些情況下，組件也可以是原生HTML元素的形式，以is特性擴(kuò)展。
下面一段簡(jiǎn)單的代碼給大家介紹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動(dòng)態(tài)加載組件的四種方式
動(dòng)態(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加載組件、動(dòng)態(tài)加載組件的幾種方式，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
