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 自定义函数缺省值的设置方法
May 05 Javascript
用jquery实现等比例缩放图片效果插件
Jul 24 Javascript
FireFox下XML对象转化成字符串的解决方法
Dec 09 Javascript
js写的方法实现上传图片之后查看大图
Mar 05 Javascript
JS 在指定数组中随机取出N个不重复的数据
Jun 10 Javascript
js实现数组转换成json
Jun 26 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
Jan 22 Javascript
javascript自执行函数
Feb 10 Javascript
vue学习笔记之给组件绑定原生事件操作示例
Feb 27 Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 Javascript
微信小程序scroll-view不能左右滑动问题的解决方法
Jul 09 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
动漫女神老婆无限好,但日本女生可能就不是这么一回事了!
2020/03/04 日漫
PHP如何通过传引用的思想实现无限分类(代码简单)
2015/10/13 PHP
php简单的上传类分享
2016/05/15 PHP
PHP获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
javascript数组的扩展实现代码集合
2008/06/01 Javascript
JS继承--原型链继承和类式继承
2013/04/08 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
jquery Deferred 快速解决异步回调的问题
2016/04/05 Javascript
JS组件Bootstrap Table布局详解
2016/05/27 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
2017/01/14 Javascript
ES6中Math对象的部分扩展
2017/02/20 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
2017/02/22 Javascript
React中如何引入Angular组件详解
2018/08/09 Javascript
对angular4子路由&辅助路由详解
2018/10/09 Javascript
layui使用label标签的方法
2019/09/14 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
2019/11/19 Javascript
简介Django框架中可使用的各类缓存
2015/07/23 Python
Python制作exe文件简单流程
2019/01/24 Python
python 实现交换两个列表元素的位置示例
2019/06/26 Python
python实现证件照换底功能
2019/08/20 Python
canvas基础之图形验证码的示例
2018/01/02 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
The Hut德国站点:时装、家居用品、美容等
2016/09/23 全球购物
香港草莓网土耳其网站:Strawberrynet TR
2017/03/02 全球购物
美国高品质个性化珠宝销售网站:Jewlr
2018/05/03 全球购物
美国职棒大联盟的官方手套、球和头盔:Rawlings
2020/02/15 全球购物
大学毕业生个人自荐信范文
2014/01/08 职场文书
安全教育感言
2014/03/04 职场文书
产品发布会策划方案
2014/05/12 职场文书
养成教育经验材料
2014/05/26 职场文书
出国留学导师推荐信
2015/03/26 职场文书
2015年乡镇工作总结范文
2015/04/22 职场文书
2015年依法治校工作总结
2015/07/27 职场文书
HTML+JS实现在线朗读器
2022/02/15 Javascript
vue3语法糖内的defineProps及defineEmits
2022/04/14 Vue.js