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

vue.js 組件

創(chuàng)新互聯(lián)是一家集網站建設,禹州企業(yè)網站建設,禹州品牌網站建設,網站定制,禹州網站建設報價,網絡營銷,網絡優(yōu)化,禹州網站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網站。

組件（Component）是 Vue.js 最強大的功能之一。

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

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

但是這種解決方案也有其問題，當網絡環(huán)境較差時，我們去首次訪問某個路由模塊，由于加載該模塊的資源需要一定的時間，那么該段時間內，我們的應用就會處于無響應的狀態(tài)，用戶體驗極差。

解決方案

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

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

具體實現(xiàn)

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

/**
 * 處理路由頁面切換時，異步組件加載過渡的處理函數(shù)
 * @param {Object} AsyncView 需要加載的組件，如 import('@/components/home/Home.vue')
 * @return {Object} 返回一個promise對象
 */
function lazyLoadView (AsyncView) {
 const AsyncHandler = () => ({
  // 需要加載的組件 (應該是一個 `Promise` 對象)
  component: AsyncView,
  // 異步組件加載時使用的組件
  loading: require('@/components/public/RouteLoading.vue').default,
  // 加載失敗時使用的組件
  error: require('@/components/public/RouteError.vue').default,
  // 展示加載時組件的延時時間。默認值是 200 (毫秒)
  delay: 200,
  // 如果提供了超時時間且組件加載也超時了，
  // 則使用加載失敗時使用的組件。默認值是：`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
  }
]

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

總結

以上所述是小編給大家介紹的Vue異步組件處理路由組件加載狀態(tài)的解決方案，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網站的支持！

文章題目：Vue異步組件處理路由組件加載狀態(tài)的解決方案
分享URL：http://bm7419.com/article26/psdjcg.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網站建設、網站策劃、品牌網站制作、電子商務、響應式網站、標簽優(yōu)化

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容