快捷導(dǎo)航

Vue異步組件處理路由組件加載狀態(tài)的解決方案

更新時(shí)間：2018年09月07日 14:56:31 作者：fisher-zh

這篇文章主要介紹了Vue異步組件處理路由組件加載狀態(tài)的解決方案，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

vue.js 組件

組件（Component）是 Vue.js 最強(qiáng)大的功能之一。

組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。

在大型單頁面應(yīng)用中，處于對性能的考慮和首屏加載速度的要求，我們一般都會(huì)使用webpack的代碼分割和vue-router的路由懶加載功能將我們的代碼分成一個(gè)個(gè)模塊，并且只在需要的時(shí)候才從服務(wù)器加載一個(gè)模塊。

但是這種解決方案也有其問題，當(dāng)網(wǎng)絡(luò)環(huán)境較差時(shí)，我們?nèi)ナ状卧L問某個(gè)路由模塊，由于加載該模塊的資源需要一定的時(shí)間，那么該段時(shí)間內(nèi)，我們的應(yīng)用就會(huì)處于無響應(yīng)的狀態(tài)，用戶體驗(yàn)極差。

解決方案

這種情況，我們一方面可以縮小路由模塊代碼的體積，靜態(tài)資源使用cdn存儲(chǔ)等方式縮短加載時(shí)間，另一方面則可以路由組件上使用異步組件，顯示loading和error等狀態(tài)，使用戶能夠得到清晰明了的操作反饋。

Vue官方文檔-動(dòng)態(tài)組件&異步組件

具體實(shí)現(xiàn)

聲明方法，基于Vue動(dòng)態(tài)組件工廠函數(shù)來返回一個(gè)Promise對象

/**
 * 處理路由頁面切換時(shí)，異步組件加載過渡的處理函數(shù)
 * @param {Object} AsyncView 需要加載的組件，如 import('@/components/home/Home.vue')
 * @return {Object} 返回一個(gè)promise對象
 */
function lazyLoadView (AsyncView) {
 const AsyncHandler = () => ({
  // 需要加載的組件 (應(yīng)該是一個(gè) `Promise` 對象)
  component: AsyncView,
  // 異步組件加載時(shí)使用的組件
  loading: require('@/components/public/RouteLoading.vue').default,
  // 加載失敗時(shí)使用的組件
  error: require('@/components/public/RouteError.vue').default,
  // 展示加載時(shí)組件的延時(shí)時(shí)間。默認(rèn)值是 200 (毫秒)
  delay: 200,
  // 如果提供了超時(shí)時(shí)間且組件加載也超時(shí)了，
  // 則使用加載失敗時(shí)使用的組件。默認(rèn)值是：`Infinity`
  timeout: 10000
 });
 return Promise.resolve({
  functional: true,
  render (h, { data, children }) {
   return h(AsyncHandler, data, children);
  }
 });
}

引入路由

const helloWorld = () => lazyLoadView(import('@/components/helloWorld'))
vue-router中使用
routes: [
  {
    path: '/helloWorld',
    name: 'helloWorld',
    component: helloWorld
  }
]

至此，改造已經(jīng)完成，當(dāng)你首次加載某一個(gè)組件的資源時(shí)（可以將網(wǎng)速調(diào)為 slow 3g，效果更明顯），就會(huì)顯示你在loading組件的內(nèi)容，而當(dāng)超出超時(shí)時(shí)間仍未加載完成該組件時(shí)，那么將顯示error組件的內(nèi)容（建議error組件盡量簡單，因?yàn)楫?dāng)處于低速網(wǎng)絡(luò)或者斷網(wǎng)情況下時(shí)，error組件內(nèi)的圖片資源等有可能出現(xiàn)無法加載的問題）

總結(jié)

以上所述是小編給大家介紹的Vue異步組件處理路由組件加載狀態(tài)的解決方案，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: