欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

為vue-router懶加載時(shí)下載js的過(guò)程中添加loading提示避免無(wú)響應(yīng)問(wèn)題

 更新時(shí)間:2018年04月03日 16:24:30   作者:東籬南山  
這篇文章主要介紹了為vue-router懶加載時(shí)下載js的過(guò)程中添加loading提示避免無(wú)響應(yīng)問(wèn)題,需要的朋友可以參考下

用過(guò)vue-router都知道它可以實(shí)現(xiàn)模塊js的懶加載,即只有當(dāng)需要時(shí)才去加載對(duì)應(yīng)模塊的js腳本文件,以加速主頁(yè)的顯示。比如只有第一次用戶點(diǎn)擊某個(gè)“用戶信息”按鈕或菜單時(shí),才下載“用戶信息”這個(gè)模塊的js組件。

懶加載的實(shí)現(xiàn),依賴與webpack下AMD模式require函數(shù)的功能。webpack會(huì)將異步require的文件生成一個(gè)獨(dú)立的js文件,調(diào)用時(shí)異步下載這個(gè)js且在完成后再執(zhí)行它。開(kāi)發(fā)項(xiàng)目中實(shí)現(xiàn)的關(guān)鍵代碼是:

const basicInfo = {
  path: '/user',
  component: resolve => require(['./basicInfo.vue'], resolve) 
}
//然后將這個(gè)basicInfo加入路由表中

但是這里有個(gè)問(wèn)題:從用戶點(diǎn)擊“用戶信息”菜單開(kāi)始,到j(luò)s文件下載完畢執(zhí)行開(kāi)始,由于從網(wǎng)絡(luò)下載js有一個(gè)時(shí)間延遲,這期間用戶界面是沒(méi)有任何響應(yīng)的,讓用戶感覺(jué)點(diǎn)上去無(wú)效,常會(huì)重復(fù)再次點(diǎn)擊。特別是js文件大而網(wǎng)速慢時(shí)更明顯。因此,在這個(gè)過(guò)程中添加一個(gè)Loading的加載提示很有必要。

我們分析這行代碼:

resolve => require(['./basicInfo.vue'], resolve)

它是一個(gè)函數(shù),執(zhí)行了require的過(guò)程,完成后再調(diào)用resolve回調(diào)函數(shù)。我們只要封裝一下,在require執(zhí)行之前顯示Loading,然后在加載完成執(zhí)行回調(diào)的時(shí)候隱藏Loading,也就實(shí)現(xiàn)這個(gè)需求了。如下:

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通過(guò)。

總結(jié)

以上所述是小編給大家介紹的為vue-router懶加載時(shí)下載js的過(guò)程中添加loading提示避免無(wú)響應(yīng)問(wèn)題,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

相關(guān)文章

  • Vue axios獲取token臨時(shí)令牌封裝案例

    Vue axios獲取token臨時(shí)令牌封裝案例

    這篇文章主要介紹了Vue axios獲取token臨時(shí)令牌封裝案例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-09-09
  • 深度解析?Vue3?的響應(yīng)式機(jī)制

    深度解析?Vue3?的響應(yīng)式機(jī)制

    這篇文章主要介紹了深度解析?Vue3?的響應(yīng)式機(jī)制,今天就帶大家深入了解一下 Vue 3 的響應(yīng)式機(jī)制,相信學(xué)完今天的內(nèi)容,會(huì)對(duì)響應(yīng)式機(jī)制有更深地體會(huì);文章會(huì)結(jié)合代碼示例,幫大家掌握響應(yīng)式機(jī)制的進(jìn)階用法,讓我們正式開(kāi)始學(xué)習(xí)吧
    2022-09-09
  • vue組件間通信六種方式(總結(jié)篇)

    vue組件間通信六種方式(總結(jié)篇)

    組件是 vue.js最強(qiáng)大的功能之一,而組件實(shí)例的作用域是相互獨(dú)立的,這就意味著不同組件之間的數(shù)據(jù)無(wú)法相互引用。這篇文章主要介紹了vue組件間通信六種方式,需要的朋友可以參考下
    2019-05-05
  • 在 Vue-CLI 中引入 simple-mock實(shí)現(xiàn)簡(jiǎn)易的 API Mock 接口數(shù)據(jù)模擬

    在 Vue-CLI 中引入 simple-mock實(shí)現(xiàn)簡(jiǎn)易的 API Mock 接口數(shù)據(jù)模擬

    本文以 Vue-CLI 為例介紹引入 simple-mock 實(shí)現(xiàn)前端開(kāi)發(fā)數(shù)據(jù)模擬的步驟。感興趣的朋友跟隨小編一起看看吧
    2018-11-11
  • 詳解Vue3 Composition API中的提取和重用邏輯

    詳解Vue3 Composition API中的提取和重用邏輯

    這篇文章主要介紹了Vue3 Composition API中的提取和重用邏輯,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-04-04
  • axios的攔截請(qǐng)求與響應(yīng)方法

    axios的攔截請(qǐng)求與響應(yīng)方法

    今天小編就為大家分享一篇axios的攔截請(qǐng)求與響應(yīng)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-08-08
  • vue2實(shí)現(xiàn)移動(dòng)端上傳、預(yù)覽、壓縮圖片解決拍照旋轉(zhuǎn)問(wèn)題

    vue2實(shí)現(xiàn)移動(dòng)端上傳、預(yù)覽、壓縮圖片解決拍照旋轉(zhuǎn)問(wèn)題

    這篇文章主要介紹了vue2實(shí)現(xiàn)移動(dòng)端上傳、預(yù)覽、壓縮圖片解決拍照旋轉(zhuǎn)問(wèn)題,需要的朋友可以參考下
    2017-04-04
  • Vue.js中this如何取到data和method里的屬性詳解

    Vue.js中this如何取到data和method里的屬性詳解

    methods屬性是一個(gè)對(duì)象,通常我們會(huì)在這個(gè)對(duì)象中定義很多的方法,下面這篇文章主要給大家介紹了關(guān)于Vue.js中this如何取到data和method里的屬性,需要的朋友可以參考下
    2022-12-12
  • 一文詳解Vue?的雙端?diff?算法

    一文詳解Vue?的雙端?diff?算法

    這篇文章主要介紹了一文詳解Vue?的雙端?diff?算法,diff?算法是渲染器中最復(fù)雜的部分,也是面試的熱點(diǎn)問(wèn)題。今天我們就通過(guò)?Vue?的?diff?算法來(lái)探究下diff?算法吧
    2022-06-06
  • vue中使用 pinia 全局狀態(tài)管理的實(shí)現(xiàn)

    vue中使用 pinia 全局狀態(tài)管理的實(shí)現(xiàn)

    本文主要介紹了vue中使用 pinia 全局狀態(tài)管理的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2022-07-07

最新評(píng)論