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 相关文章推荐
JQuery的一些小应用收集
Mar 27 Javascript
神奇的7个jQuery 3D插件整理
Jan 06 Javascript
js原型链原理看图说明
Jul 07 Javascript
js限制textarea每行输入字符串长度的代码
Oct 31 Javascript
form表单只提交数据而不进行页面跳转的解决方案
Sep 18 Javascript
简述JavaScript对传统文档对象模型的支持
Jun 16 Javascript
18个非常棒的jQuery代码片段
Nov 02 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
AngularJS动态菜单操作指令
Apr 25 Javascript
RequireJS用法简单示例
Aug 20 Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
vue-cli3中vue.config.js配置教程详解
May 29 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中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
php array_values 返回数组的值实例详解
2016/11/17 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
form中限制文本字节数js代码
2007/06/10 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
2012/02/07 Javascript
javascript 获取图片尺寸及放大图片
2013/09/04 Javascript
JavaScript加强之自定义callback示例
2013/09/21 Javascript
多个jQuery版本共存的处理方案
2015/03/17 Javascript
使用Chrome浏览器调试AngularJS应用的方法
2015/06/18 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
JS、jQuery中select的用法详解
2016/04/21 Javascript
20行js代码实现的贪吃蛇小游戏
2017/06/20 Javascript
微信小程序webview实现长按点击识别二维码功能示例
2019/01/24 Javascript
vue多次循环操作示例
2019/02/08 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
2019/05/02 Javascript
js实现简单的打印表格
2020/01/15 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
小程序表单认证布局及验证详解
2020/06/19 Javascript
VUE使用axios调用后台API接口的方法
2020/08/03 Javascript
Python编程使用NLTK进行自然语言处理详解
2017/11/16 Python
pytorch索引查找 index_select的例子
2019/08/18 Python
Tensorflow实现将标签变为one-hot形式
2020/05/22 Python
西班牙创意礼品和小工具网上商店:Curiosite
2016/07/26 全球购物
工商治理实习生的自我评价
2014/01/15 职场文书
采购部部长岗位职责
2014/02/06 职场文书
客服部工作职责范本
2014/02/14 职场文书
协议书模板
2014/04/23 职场文书
励志演讲稿800字
2014/08/21 职场文书
学生抄作业检讨书(2篇)
2014/10/17 职场文书
2014党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
2016年大学生暑期社会实践活动总结
2016/04/06 职场文书
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL
Redis 哨兵机制及配置实现
2022/03/25 Redis
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技
最新动漫情报:2022年7月新番定档超过30部, OVERLORD骨王第四季也在其中噢
2022/05/04 日漫