快捷導(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)文章

Vue前端左側(cè)菜單右側(cè)內(nèi)容的網(wǎng)站界面制作過程
這篇文章主要介紹了使用Vue和ElementUI制作一個(gè)帶有左側(cè)菜單和右側(cè)內(nèi)容區(qū)的網(wǎng)站頁面的過程,文中通過CSS樣式和深度作用符,實(shí)現(xiàn)了頁面的美化和功能的完善,需要的朋友可以參考下
2025-02-02
vue中cookies的使用方式
這篇文章主要介紹了vue中cookies的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
vue中v-model的應(yīng)用及使用詳解
v-model用于表單數(shù)據(jù)的雙向綁定，其實(shí)它就是一個(gè)語法糖。這篇文章主要介紹了vue中v-model的應(yīng)用,需要的朋友可以參考下
2018-06-06
解決vue-cli 打包后自定義動(dòng)畫未執(zhí)行的問題
今天小編就為大家分享一篇解決vue-cli 打包后自定義動(dòng)畫未執(zhí)行的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
Vue項(xiàng)目移動(dòng)端滾動(dòng)穿透問題的實(shí)現(xiàn)
這篇文章主要介紹了Vue項(xiàng)目移動(dòng)端滾動(dòng)穿透問題的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
vue+iview/elementUi實(shí)現(xiàn)城市多選
這篇文章主要介紹了vue+iview/elementUi實(shí)現(xiàn)城市多選，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
swiper/vue 獲取 swiper實(shí)例方法詳解
在網(wǎng)上搜了一下如何調(diào)用swiper實(shí)例,大部分都是通過 swiperRef = new Swiper(‘.swiper’, options) 這種方法初始化swiper,然后直接能用 swiperRef 實(shí)例,這篇文章主要介紹了swiper/vue 獲取 swiper實(shí)例方法詳解,需要的朋友可以參考下
2023-12-12
vue3如何實(shí)現(xiàn)在style中使用響應(yīng)式變量
vue3已經(jīng)內(nèi)置了這個(gè)功能啦,可以在style中使用v-bind指令綁定script模塊中的響應(yīng)式變量,這篇文章我們來講講vue是如何實(shí)現(xiàn)在style中使用script模塊中的響應(yīng)式變量,感興趣的朋友一起看看吧
2024-07-07
vue 優(yōu)化CDN加速的方法示例
這篇文章主要介紹了vue 優(yōu)化CDN加速的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09
一篇帶你搞懂Vue中的自定義指令
自定義指令,是Vue提供的一種擴(kuò)展和定制的機(jī)制,使開發(fā)者能夠在組件中直接操作DOM、處理事件、添加樣式等,并提供了與第三方庫集成的方式,定義指令使得Vue在處理交互和DOM操作時(shí)更加靈活和強(qiáng)大,本文將帶大家搞懂Vue中的自定義指令,需要的朋友可以參考下
2023-07-07