Vue异步组件处理路由组件加载状态的解决方案


Posted in Javascript onSeptember 07, 2018

vue.js 组件

组件(Component)是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素,封装可重用的代码。

在大型单页面应用中,处于对性能的考虑和首屏加载速度的要求,我们一般都会使用webpack的代码分割和vue-router的路由懒加载功能将我们的代码分成一个个模块,并且只在需要的时候才从服务器加载一个模块。

但是这种解决方案也有其问题,当网络环境较差时,我们去首次访问某个路由模块,由于加载该模块的资源需要一定的时间,那么该段时间内,我们的应用就会处于无响应的状态,用户体验极差。

解决方案

这种情况,我们一方面可以缩小路由模块代码的体积,静态资源使用cdn存储等方式缩短加载时间,另一方面则可以路由组件上使用异步组件,显示loading和error等状态,使用户能够得到清晰明了的操作反馈。

Vue官方文档-动态组件&异步组件

具体实现

声明方法,基于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异步组件处理路由组件加载状态的解决方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
拖动布局之保存布局页面cookies篇
Oct 29 Javascript
JavaScript中的迭代器和生成器详解
Oct 29 Javascript
8个超实用的jQuery功能代码分享
Jan 08 Javascript
基于JavaScript实现一定时间后去执行一个函数
Dec 14 Javascript
AngularJS equal比较对象实例详解
Sep 14 Javascript
Vue.js快速入门实例教程
Oct 15 Javascript
浅谈js中function的参数默认值
Feb 20 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
Apr 22 Javascript
Node.js+Express+MySql实现用户登录注册功能
Jul 10 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
微信小程序实现图片上传、删除和预览功能的方法
Dec 18 Javascript
react中hook介绍以及使用教程
Dec 11 Javascript
Vue2.0 v-for filter列表过滤功能的实现
Sep 07 #Javascript
koa socket即时通讯的示例代码
Sep 07 #Javascript
vue侧边栏动态生成下级菜单的方法
Sep 07 #Javascript
Vuejs开发环境搭建及热更新【推荐】
Sep 07 #Javascript
小程序点赞收藏功能的实现代码示例
Sep 07 #Javascript
前端防止用户重复提交js实现代码示例
Sep 07 #Javascript
vue实现打印功能的两种方法
Sep 07 #Javascript
You might like
解析用PHP读写音频文件信息的详解(支持WMA和MP3)
2013/05/10 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
php生成验证码函数
2015/10/20 PHP
javascript在一段文字中的光标处插入其他文字
2007/08/26 Javascript
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
javascript实现window.print()去除页眉页脚
2014/12/30 Javascript
jquery $(document).ready()和window.onload的区别浅析
2015/02/04 Javascript
JavaScript通过select动态更换图片的方法
2015/03/23 Javascript
loading动画特效小结
2017/01/22 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
JavaScript中数组Array方法详解
2017/02/27 Javascript
详解JS模块导入导出
2017/12/20 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
Vue中的作用域CSS和CSS模块的区别
2018/10/09 Javascript
js实现超级玛丽小游戏
2020/03/18 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
2020/04/28 Javascript
Javascript异步执行不按顺序解决方案
2020/04/30 Javascript
vuex分模块后,实现获取state的值
2020/07/26 Javascript
python strip() 函数和 split() 函数的详解及实例
2017/02/03 Python
通过源码分析Python中的切片赋值
2017/05/08 Python
python 如何快速找出两个电子表中数据的差异
2017/05/26 Python
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
python内存管理机制原理详解
2019/08/12 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
python里的单引号和双引号的有什么作用
2020/06/17 Python
MAC平台基于Python Appium环境搭建过程图解
2020/08/13 Python
HTML5触摸事件演化tap事件介绍
2016/03/25 HTML / CSS
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
美国最大的船只买卖在线市场:Boat Trader
2018/08/04 全球购物
应届生护士求职信
2013/11/01 职场文书
公司市场部岗位职责
2013/12/02 职场文书
小学清明节活动方案
2014/03/08 职场文书
幼儿园新年寄语
2014/04/03 职场文书
本科毕业生自荐信
2014/06/02 职场文书
Python编解码问题及文本文件处理方法详解
2021/06/20 Python