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 相关文章推荐
解决iframe的frameborder在chrome/ff/ie下的差异
Aug 12 Javascript
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
Jan 15 Javascript
Javascript this 的一些学习总结
Aug 02 Javascript
jcrop基本参数一览
Jul 16 Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 Javascript
jquery弹出遮掩层效果【附实例代码】
Apr 28 Javascript
解决AngualrJS页面刷新导致异常显示问题
Apr 20 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
Oct 17 Javascript
JavaScript, select标签元素左右移动功能实现
May 14 Javascript
在vue-cli3中使用axios获取本地json操作
Jul 30 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
基于JavaScript实现简单扫雷游戏
Jan 02 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
php5.3 不支持 session_register() 此函数已启用的解决方法
2013/11/12 PHP
Thinkphp中import的几个用法详细介绍
2014/07/02 PHP
PHP中SimpleXML函数用法分析
2014/11/26 PHP
php数字运算验证码的实现代码
2015/07/30 PHP
使用PHP实现生成HTML静态页面
2015/11/18 PHP
PHP操作Redis常用技巧总结
2018/04/24 PHP
thinkphp框架使用JWTtoken的方法详解
2019/10/10 PHP
获取URL地址中的文件名和参数的javascript代码
2009/09/02 Javascript
JQuery与Ajax常用代码实现对比
2009/10/03 Javascript
jquery中ajax学习笔记3
2011/10/16 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
2016/05/26 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
2016/07/07 Javascript
详解jQuery中的DOM操作
2016/12/23 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
2018/05/08 Javascript
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
2020/10/29 Javascript
[50:11]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第三场
2018/04/09 DOTA
python中enumerate函数用法实例分析
2015/05/20 Python
Python中关于使用模块的基础知识
2015/05/24 Python
python中argparse模块用法实例详解
2015/06/03 Python
在Django中使用Sitemap的方法讲解
2015/07/22 Python
Python UnboundLocalError和NameError错误根源案例解析
2018/10/31 Python
Django框架实现分页显示内容的方法详解
2019/05/10 Python
html5组织内容_动力节点Java学院整理
2017/07/10 HTML / CSS
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
Lookfantastic美国/加拿大:英国知名美妆购物网站
2019/03/27 全球购物
应用服务器有那些
2012/01/19 面试题
生产内勤岗位职责
2013/12/07 职场文书
社团文化节邀请函
2014/01/10 职场文书
超市创业计划书
2014/04/24 职场文书
检讨书格式
2015/01/23 职场文书
个人更名证明
2015/06/23 职场文书
2016继续教育培训学习心得体会
2016/01/19 职场文书