Vue中的异步组件函数实现代码


Posted in Javascript onJuly 20, 2018

具体代码如下所示:

export default new Router({
 routes: [
  {
   path: '/live',
   name: 'live',
   component: () => import('@/view/live/live.vue')
  }
 ]
})

上面的代码是很常见的router代码分割,只在代码路由为live才会去加载live.vue

但这样在live.vue获取的过程将是一片空白,什么也没有,体验不好, 利用vue提供的异步组建可以解决

新建一个 loadable.vue

<template>
  <index></index>
</template>
<script>
  import LoadingComponent from './load.vue' // LoadingComponents是 live.vue为获取前展示的内容
  export default {
    components: {
      index: () => ({
        component: import('@/view/live/live.vue'),
        // 异步组件加载时使用的组件
        loading: LoadingComponent,
        // 展示加载时组件的延时时间。默认值是 200 (毫秒)
        delay: 200,
        // 如果提供了超时时间且组件加载也超时了,
        // 则使用加载失败时使用的组件。默认值是:`Infinity`
        timeout: 3000
      })
    }
  }
</script>

然后修改router.js

export default new Router({
 routes: [
  {
   path: '/live',
   name: 'live',
   component: import('loadable.vue')
  }
 ]
})

这样在获取到live.vue之前就会有自定义的loading展示了

但是路由很多, 我们不可能每个路由都写一个 loadable.vue, 所以编写一个函数来解决

新建一个 loadable.js

import LoadingComponent from './load.vue'
export default (asyncComponent) => {
  const Com= () => ({
    // 这里vue官网可以知道具体有哪些参数可以设置
    // https://cn.vuejs.org/v2/guide/components-dynamic-async.html#%E5%A4%84%E7%90%86%E5%8A%A0%E8%BD%BD%E7%8A%B6%E6%80%81
    component: asyncComponent(),
    loading: LoadingComponent
  })
  return {
    render (h) {
     return h(Com, {})
    }
  }
}

然后修改一下router.js

import loadable from 'loadable.js'
export default new Router({
 routes: [
  {
   path: '/live',
   name: 'live',
   component: loadable (() => import('@/view/live/live.vue'))
  }
 ]
})

这样一个极简的vue异步函数就完成了

总结

以上所述是小编给大家介绍的Vue中的异步组件函数实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript之编码规范 推荐
May 23 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
Aug 02 Javascript
获取表单控件原始(初始)值的方法
Aug 21 Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 Javascript
JS实现很酷的EMAIL地址添加功能实例
Feb 28 Javascript
跟我学习javascript的最新标准ES6
Nov 20 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 Javascript
JavaScript 不支持 indexof 该如何解决
Mar 30 Javascript
深入理解node.js http模块
Jan 24 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 Javascript
vue element upload组件 file-list的动态绑定实现
Oct 11 Javascript
vue 中的keep-alive实例代码
Jul 20 #Javascript
Angularjs实现页面模板清除的方法
Jul 20 #Javascript
搭建vue开发环境
Jul 19 #Javascript
jQuery实现表单动态添加数据并提交的方法
Jul 19 #jQuery
微信小程序项目实践之九宫格实现及item跳转功能
Jul 19 #Javascript
js调用设备摄像头的方法
Jul 19 #Javascript
微信小程序定位当前城市的方法
Jul 19 #Javascript
You might like
基于php 随机数的深入理解
2013/06/05 PHP
PHP直接修改表内容DataGrid功能实现代码
2015/09/24 PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
CI框架常用方法小结
2016/05/17 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
getElementById在任意一款浏览器中都可以用吗的疑问回复
2007/05/13 Javascript
JQUERY 对象与DOM对象之两者相互间的转换
2009/04/27 Javascript
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
2011/07/10 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
2014/01/02 Javascript
js实现分享到随页面滚动而滑动效果的方法
2015/04/10 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
2015/05/12 Javascript
jQuery与JavaScript节点创建方法的对比
2016/11/18 Javascript
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
2017/04/27 jQuery
Node.js自定义实现文件路由功能
2017/09/22 Javascript
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
Layui数据表格跳转到指定页的实现方法
2019/09/05 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
js实现开关灯效果
2020/03/30 Javascript
Python实现的数据结构与算法之快速排序详解
2015/04/22 Python
python多线程实现TCP服务端
2019/09/03 Python
Waterford加拿大官方网站:世界著名的水晶杯品牌
2016/11/01 全球购物
巴西服装和鞋子购物网站:Marisa
2018/10/25 全球购物
高中班主任评语大全
2014/04/25 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
县委党的群众路线教育实践活动工作情况报告
2014/10/25 职场文书
2015年班组长工作总结
2015/04/10 职场文书
唐山大地震的观后感
2015/06/05 职场文书
少先队入队仪式主持词
2015/07/04 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书
关于JavaScript轮播图的实现
2021/11/20 Javascript
Nginx防盗链与服务优化配置的全过程
2022/01/18 Servers
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技
Win11 PC上的Outlook搜索错误怎么办?
2022/07/15 数码科技