詳解VueJs異步動態(tài)加載塊
更新時間：2017年03月09日 10:31:04 作者：daelly
本篇文章主要介紹了VueJs異步動態(tài)加載塊，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
首先定義組件為異步加載
define(['jquery','vue'],function($,Vue){
Vue.component('comp1',function(resolve){
require(['component/comp1'],resolve);
});
Vue.component('comp2',function(resolve){
require(['component/comp2'],resolve);
});
var b = new Vue({
el:"#app",
data:{
currentView:'comp1'
},
methods:{
toggleView:function(){
console.log(this.currentView);
this.currentView = this.currentView=='comp1'?'comp2':'comp1';
}
}
});
})
具體可以參考vuejs的異步組件和動態(tài)組件。然后是html里面的代碼
<div id="app">
<keep-alive><!-- 使用keep-alive可以讓動態(tài)被切出去的組件繼續(xù)保存在內(nèi)存中（只是隱藏看不到），卻回來之后會繼續(xù)之前的狀態(tài)和數(shù)據(jù) -->
<component v-bind:is="currentView"></component>
</keep-alive>
<button type="button" v-on:click="toggleView">切換view</button>
</div>
這種結(jié)構(gòu)的好處是，頁面初始化加載的時候只會加載需要的那個組件相關(guān)的內(nèi)容，沒切換到的那個組件不加載，使頁面加載的速度加快。同時，每個組件加載過一次之后切換出再切回來不會重復(fù)加載相關(guān)內(nèi)容和重復(fù)執(zhí)行渲染
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了element-ui封裝一個Table模板組件的示例，幫助大家更好的理解和學習vue框架的使用，感興趣的朋友可以了解下2021-01-01
這篇文章主要為大家詳細介紹了Vue+Element實現(xiàn)表格單元格編輯，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要給大家介紹了關(guān)于Vue+element-ui添加自定義右鍵菜單的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
這篇文章主要介紹了關(guān)于應(yīng)用UI組件的移動端適配方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue+elementUI顯示表格指定列合計數(shù)據(jù)方式
這篇文章主要介紹了vue+elementUI顯示表格指定列合計數(shù)據(jù)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了基于element-UI input等組件寬度修改方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
vuecli項目構(gòu)建SSR服務(wù)端渲染的實現(xiàn)
這篇文章主要介紹了vuecli項目構(gòu)建SSR服務(wù)端渲染的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-10-10
elementplus實現(xiàn)多級表格(最后一級展示圖片)
本文主要介紹了elementplus實現(xiàn)多級表格(最后一級展示圖片)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
Vue 中文本內(nèi)容超出規(guī)定行數(shù)后展開收起的處理的實現(xiàn)方法
這篇文章主要介紹了Vue 中文本內(nèi)容超出規(guī)定行數(shù)后展開收起的處理的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了Vue移動端下拉刷新組件的使用教程，每一次我在使用vant組件庫里面list組件和下拉刷新連在一起用的時候都會出現(xiàn)下拉刷新和列表下滑局部滾動的沖突，這就很難受，這篇文章將解決它2023-04-04