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 相关文章推荐
js实现文本框中焦点在最后位置
Mar 04 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
Mar 05 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 Javascript
给easyui datebox扩展一个清空的实例
Nov 09 Javascript
深究AngularJS中ng-drag、ng-drop的用法
Jun 12 Javascript
vue中各组件之间传递数据的方法示例
Jul 27 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 Javascript
解决在layer.open中使用时间控件laydate失败的问题
Sep 11 Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 Javascript
js实现拖动缓动效果
Jan 13 Javascript
Element图表初始大小及窗口自适应实现
Jul 10 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目录与文件操作
2011/12/30 PHP
PHP新手用的Insert和Update语句构造类
2012/03/31 PHP
PHP5各个版本的新功能和新特性总结
2014/03/16 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
2007/01/11 Javascript
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
javascript 动态生成私有变量访问器
2009/12/06 Javascript
javascript 45种缓动效果 非常酷
2011/06/28 Javascript
javascript suggest效果 自动完成实现代码分享
2012/02/17 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
2012/10/15 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
extjs每个组件要设置唯一的ID否则会出错
2014/06/15 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
2014/09/22 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
JavaScript中5种调用函数的方法
2015/03/12 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
原生js二级联动效果
2017/06/20 Javascript
webpack4 + react 搭建多页面应用示例
2018/08/03 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
2019/06/09 Javascript
JS如何生成随机验证码
2020/03/02 Javascript
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
python中matplotlib的颜色及线条控制的示例
2018/03/16 Python
python sys,os,time模块的使用(包括时间格式的各种转换)
2018/04/27 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
css3 中的新特性加强记忆详解
2016/04/16 HTML / CSS
前端实现打印图像功能
2019/08/27 HTML / CSS
YOINS官网:时尚女装网上购物
2017/03/17 全球购物
家用个人磨皮机:Trophy Skin
2017/03/30 全球购物
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
eDreams意大利:南欧领先的在线旅行社
2018/11/23 全球购物
最新销售员个人自荐信
2013/09/21 职场文书
党的群众路线教育实践活动学习计划
2014/11/03 职场文书
2014年宣传部个人工作总结
2014/12/06 职场文书
个人工作失误的保证书怎么写?
2019/06/21 职场文书
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python