溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
什么是組件：
組件是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={
name:name,
component:myComponent
}
2、使用import導入組件，直接將組件賦值給componet
var name = 'system';
var route={
name:name,
component :() => import('../components/' + name + '.vue');
}
3、使用require 導入組件，可以獲取到組件
var name = 'system';
var myComponent = resolve => require.ensure([], () => resolve(require('../components/' + name + '.vue')));
var route={
name:name,
component:myComponent
}
4、使用require 導入組件，直接將組件賦值給componet
var name = 'system';
var route={
name:name,
component(resolve) {
require(['../components/' + name + '.vue'], resolve)
}
}
總結
以上所述是小編給大家介紹的Vue加載組件、動態加載組件的幾種方式，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
