為vue-router懶加載時下載js的過程中添加loading提示避免無響應(yīng)問題
用過vue-router都知道它可以實現(xiàn)模塊js的懶加載,即只有當(dāng)需要時才去加載對應(yīng)模塊的js腳本文件,以加速主頁的顯示。比如只有第一次用戶點擊某個“用戶信息”按鈕或菜單時,才下載“用戶信息”這個模塊的js組件。
懶加載的實現(xiàn),依賴與webpack下AMD模式require函數(shù)的功能。webpack會將異步require的文件生成一個獨立的js文件,調(diào)用時異步下載這個js且在完成后再執(zhí)行它。開發(fā)項目中實現(xiàn)的關(guān)鍵代碼是:
const basicInfo = { path: '/user', component: resolve => require(['./basicInfo.vue'], resolve) } //然后將這個basicInfo加入路由表中
但是這里有個問題:從用戶點擊“用戶信息”菜單開始,到j(luò)s文件下載完畢執(zhí)行開始,由于從網(wǎng)絡(luò)下載js有一個時間延遲,這期間用戶界面是沒有任何響應(yīng)的,讓用戶感覺點上去無效,常會重復(fù)再次點擊。特別是js文件大而網(wǎng)速慢時更明顯。因此,在這個過程中添加一個Loading的加載提示很有必要。
我們分析這行代碼:
resolve => require(['./basicInfo.vue'], resolve)
它是一個函數(shù),執(zhí)行了require的過程,完成后再調(diào)用resolve回調(diào)函數(shù)。我們只要封裝一下,在require執(zhí)行之前顯示Loading,然后在加載完成執(zhí)行回調(diào)的時候隱藏Loading,也就實現(xiàn)這個需求了。如下:
const basicInfo = { path: '/user', component: resolve => { [顯示Loading] require(['./basicInfo.vue'], component => { [隱藏Loading] resolve(component) }) } };
顯示和隱藏Loading的代碼,可根據(jù)自己的UI框架處理就行。比如element-ui:
import { Loading } from 'element-ui'; var unique; export default { show() { let opt = {body: true, text: 'Loading...'}; if(!unique) unique = Loading.service(opt); }, resolve(resolve) { return function (component) { if (unique) { unique.close(); unique = null; } resolve(component) } } } const basicInfo = { path: '/user', component: resolve => { spinRoute.show(); require(['./basicInfo.vue'], spinRoute.resolve(resolve)) } };
以上在vue-router 2.3.1通過。
總結(jié)
以上所述是小編給大家介紹的為vue-router懶加載時下載js的過程中添加loading提示避免無響應(yīng)問題,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
在 Vue-CLI 中引入 simple-mock實現(xiàn)簡易的 API Mock 接口數(shù)據(jù)模擬
本文以 Vue-CLI 為例介紹引入 simple-mock 實現(xiàn)前端開發(fā)數(shù)據(jù)模擬的步驟。感興趣的朋友跟隨小編一起看看吧2018-11-11詳解Vue3 Composition API中的提取和重用邏輯
這篇文章主要介紹了Vue3 Composition API中的提取和重用邏輯,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04vue2實現(xiàn)移動端上傳、預(yù)覽、壓縮圖片解決拍照旋轉(zhuǎn)問題
這篇文章主要介紹了vue2實現(xiàn)移動端上傳、預(yù)覽、壓縮圖片解決拍照旋轉(zhuǎn)問題,需要的朋友可以參考下2017-04-04Vue.js中this如何取到data和method里的屬性詳解
methods屬性是一個對象,通常我們會在這個對象中定義很多的方法,下面這篇文章主要給大家介紹了關(guān)于Vue.js中this如何取到data和method里的屬性,需要的朋友可以參考下2022-12-12vue中使用 pinia 全局狀態(tài)管理的實現(xiàn)
本文主要介紹了vue中使用 pinia 全局狀態(tài)管理的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07