您好,登錄后才能下訂單哦!
今天小編給大家分享一下vue-router懶加載下載js的過程中添加loading提示避免無響應(yīng)怎么解決的相關(guān)知識點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識,所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
用過vue-router都知道它可以實(shí)現(xiàn)模塊js的懶加載,即只有當(dāng)需要時才去加載對應(yīng)模塊的js腳本文件,以加速主頁的顯示。比如只有第一次用戶點(diǎn)擊某個“用戶信息”按鈕或菜單時,才下載“用戶信息”這個模塊的js組件。
懶加載的實(shí)現(xiàn),依賴與webpack下AMD模式require函數(shù)的功能。webpack會將異步require的文件生成一個獨(dú)立的js文件,調(diào)用時異步下載這個js且在完成后再執(zhí)行它。開發(fā)項(xiàng)目中實(shí)現(xiàn)的關(guān)鍵代碼是:
const basicInfo = { path: '/user', component: resolve => require(['./basicInfo.vue'], resolve) } //然后將這個basicInfo加入路由表中
但是這里有個問題:從用戶點(diǎn)擊“用戶信息”菜單開始,到j(luò)s文件下載完畢執(zhí)行開始,由于從網(wǎng)絡(luò)下載js有一個時間延遲,這期間用戶界面是沒有任何響應(yīng)的,讓用戶感覺點(diǎn)上去無效,常會重復(fù)再次點(diǎn)擊。特別是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,也就實(shí)現(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通過。
Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢,Vue中頁面使用的是局部刷新,不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom,可以大大提升訪問速度和用戶體驗(yàn)。
以上就是“vue-router懶加載下載js的過程中添加loading提示避免無響應(yīng)怎么解決”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學(xué)習(xí)更多的知識,請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。