vue.js 組件
組件（Component）是 Vue.js 最強大的功能之一。
組件可以擴展 HTML 元素，封裝可重用的代碼。
在大型單頁面應用中，處于對性能的考慮和首屏加載速度的要求，我們一般都會使用webpack的代碼分割和vue-router的路由懶加載功能將我們的代碼分成一個個模塊，并且只在需要的時候才從服務器加載一個模塊。
但是這種解決方案也有其問題，當網絡環境較差時，我們去首次訪問某個路由模塊，由于加載該模塊的資源需要一定的時間，那么該段時間內，我們的應用就會處于無響應的狀態，用戶體驗極差。
解決方案
這種情況，我們一方面可以縮小路由模塊代碼的體積，靜態資源使用cdn存儲等方式縮短加載時間，另一方面則可以路由組件上使用異步組件，顯示loading和error等狀態，使用戶能夠得到清晰明了的操作反饋。
具體實現
聲明方法，基于Vue動態組件工廠函數來返回一個Promise對象
/** * 處理路由頁面切換時，異步組件加載過渡的處理函數 * @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組件內的圖片資源等有可能出現無法加載的問題）
總結
以上所述是小編給大家介紹的Vue異步組件處理路由組件加載狀態的解決方案，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
