快捷導(dǎo)航

Vue加載組件、動(dòng)態(tài)加載組件的幾種方式

更新時(shí)間：2018年08月31日 11:34:33 作者：樓蘭之幻

組件是Vue.js最強(qiáng)大的功能之一。組件可以擴(kuò)展HTML元素，封裝可重用的代碼。這篇文章通過實(shí)例代碼給大家介紹了Vue加載組件、動(dòng)態(tài)加載組件的幾種方式，需要的朋友參考下吧

什么是組件：

組件是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動(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ì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

vue3 學(xué)習(xí)筆記之a(chǎn)xios的使用變化總結(jié)
本篇文章主要旨在幫助正在學(xué)vue3或者準(zhǔn)備學(xué)vue3的同學(xué)了解網(wǎng)絡(luò)請(qǐng)求axios該如何使用，防止接觸了一點(diǎn)點(diǎn)vue3的同學(xué)會(huì)有個(gè)疑問。有興趣的小伙伴可以關(guān)注一下
2021-11-11
vue3安裝vant實(shí)現(xiàn)按需引入和全局引入
本文主要介紹了vue3安裝vant實(shí)現(xiàn)按需引入和全局引入，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
vue-manage-system升級(jí)到vue3的開發(fā)總結(jié)分析
這篇文章主要為大家介紹了vue-manage-system升級(jí)到vue3的開發(fā)總結(jié)分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
Vue3+ElementPlus封裝圖片空間組件的門面實(shí)例
圖片空間是用于管理上傳圖片的工具,可以讓用戶方便地存儲(chǔ)、管理和調(diào)用圖片,提高工作效率,它通常具備多樣的樣式,但操作入口統(tǒng)一,便于使用,通過圖片空間組件,用戶能直接在其他模塊（例如商品圖片）中選擇所需圖片
2024-09-09
關(guān)于Element-ui中el-table出現(xiàn)的表格錯(cuò)位問題解決
使用ElementUI的el-table后,偶然發(fā)現(xiàn)出現(xiàn)行列錯(cuò)位、對(duì)不齊問題,下面這篇文章主要給大家介紹了關(guān)于Element-ui中el-table出現(xiàn)的表格錯(cuò)位問題解決的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
vue+elementUI顯示表格指定列合計(jì)數(shù)據(jù)方式
這篇文章主要介紹了vue+elementUI顯示表格指定列合計(jì)數(shù)據(jù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
解決vant中 tab欄遇到的坑 van-tabs
這篇文章主要介紹了解決vant中 tab欄遇到的坑 van-tabs，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
Vue實(shí)現(xiàn)定位并解決內(nèi)存泄漏
Vue.js?是一個(gè)流行且強(qiáng)大的?JavaScript?框架,它允許我們構(gòu)建動(dòng)態(tài)和交互式?Web?應(yīng)用程序,本文我們將深入探討?Vue.js?應(yīng)用程序中內(nèi)存泄漏的原因,并探索如何定位和修復(fù)這些問題的有效策略,希望對(duì)大家有所幫助
2023-09-09
vue3在table里使用elementUI的form表單驗(yàn)證的示例代碼
這篇文章主要介紹了vue3在table里使用elementUI的form表單驗(yàn)證的示例代碼,本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-12-12
mpvue小程序仿qq左滑置頂刪除組件
最近在做小程序開發(fā)的時(shí)候，遇到了點(diǎn)問題。最終選擇用mpvue來做，誰知這么多坑，下面小編把我遇到的問題分享給大家，如果大家對(duì)mpvue小程序仿qq左滑置頂刪除組件相關(guān)知識(shí)感興趣的朋友一起看看吧
2018-08-08