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

具体代码如下所示：

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中的异步组件函数实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Vue异步组件使用详解

    Vue的异步组件,供大家参考,具体内容如下 1.前置要求 建议使用webpack: Browserify在默认情况下不支持: 2.用法解释 首先上官网说明:异步组件 虽然说明是没问题的,但是示例中的写法怪怪的,不符合一般新手学习者在实际使用中的习惯. 嗯,换句话说,这段代码告诉你,通过这种方式引入异步组件,然后他漏掉了一些内容,比如说赋值,如何使用之类. [1]官方示例代码: Vue.component('async-webpack-example', function (resolve) {

  • 解析vue路由异步组件和懒加载案例

    最近研究了vue性能优化,涉及到vue异步组件和懒加载.一番研究得出如下的解决方案. 原理:利用webpack对代码进行分割是懒加载的前提,懒加载就是异步调用组件,需要时候才下载. 案例: 首先是组件,创建四个组件分别命名为first.second.three和four:内容如下 first <template> <div>我是第一个页面</div> </template> second <template> <div>我是第二个页面

  • vue+webpack实现异步组件加载的方法

    8.9更新:之前想搬迁到csdn的时候由于邀请码问题迟迟没把博客转过来,所以跑去博客园了,今天发现csdn已经帮我把文章搬过来,有必要修正一下这篇文章. 写这篇文章的时候因为刚接触vue,所以捣鼓的时候有些迷糊. ----------------/*以下可以跳过*/----------------- 本来很简单的事情折腾好久. 1.vue文档只给出了Vue.component('comp_name',function(resolve,reject){})在回调里ajax加载组件定义内容的例子,但

  • 简单的Vue异步组件实例Demo

    前言 在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载.为了进一步简化,Vue.js 允许将组件定义为一个工厂函数,异步地解析组件的定义.Vue.js 只在组件需要渲染时触发工厂函数,并且把结果缓存起来,用于后面的再次渲染. 为什么需要异步组件,道理和webpack的按需加载是一样的,如果一开始就加载所有的组件,那么是比较耗时的,所以我们可以将一些组件定义为异步组件,在需要使用的时候再进行加载. 所以好处的话就显而易见了 : 按需加载,可以节省首次加载的时间,提高速度,也算是一

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

    具体代码如下所示: export default new Router({ routes: [ { path: '/live', name: 'live', component: () => import('@/view/live/live.vue') } ] }) 上面的代码是很常见的router代码分割,只在代码路由为live才会去加载live.vue 但这样在live.vue获取的过程将是一片空白,什么也没有,体验不好, 利用vue提供的异步组建可以解决 新建一个 loadable.vue

  • vue 父组件中调用子组件函数的方法

    在父组件中调用子组件的方法: 1.给子组件定义一个ref属性.eg:ref="childItem" 2.在子组件的methods中声明一个函数.eg: useInPar:function (str) {console.log(str)} 2. 在父组件的中声明一个函数,并通过this.$refs.childItem.userInPar来使用子组件中声明的函数. 父组件: <template> <child-item ref='child' /> <butt

  • 深入解读VUE中的异步渲染的实现

    接下来在本文里一起看看当数据变化时,从源码层面逐步分析一下触发页面的响应动作之后,如何做渲染到页面上,展示到用户层面的. 同时也会了解在Vue中的异步方法NextTick的源码实现,看一看NextTick方法与浏览器的异步API有何联系. 注意,本文涉及的Vue源码版本为2.6.11. 什么是异步渲染? 这个问题应该先要做一个前提补充,当数据在同步变化的时候,页面订阅的响应操作为什么不会与数据变化完全对应,而是在所有的数据变化操作做完之后,页面才会得到响应,完成页面渲染. 从一个例子体验一下异步

  • 一文搞懂Vue3中的异步组件defineAsyncComponentAPI的用法

    一文搞懂Vue3中的异步组件defineAsyncComponentAPI的用法

    目录 前言 传递工厂函数作为参数 传递对象类型作为参数 总结 前言 当我们的项目达到一定的规模时,对于某些组件来说,我们并不希望一开始全部加载,而是需要的时候进行加载:这样的做得目的可以很好的提高用户体验. 为了实现这个功能,Vue3中为我们提供了一个方法,即defineAsyncComponent,这个方法可以传递两种类型的参数,分别是函数类型和对象类型,接下来我们分别学习. 传递工厂函数作为参数 defineAsyncComponent方法接收一个工厂函数是它的基本用法,这个工厂函数必须返回

  • vue App.vue中的公共组件改变值触发其他组件或.vue页面监听

    业务场景重现 现在我的App.vue里面有一个头部的公共组件,头部组件里有一个输入框,当我输入词条时,将词条传进App.vue里的<router-view>里的.vue页面,并进行查询获取数据 解决思路如下: 1.如何拿到头部的词条 2.当词条改变时如何触发.vue里的请求数据事件 解决方案 我是用vuex数据仓库来存储词条的,当词条改变时,修改数据仓库里的词条 然后在.vue页面里监听这个词条,当词条改变时触发请求数据的事件 代码 数据仓库store.js import Vue from '

  • Vue中的父子组件通讯以及使用sync同步父子组件数据

    Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言 父子组件通讯,可分为两种情况: 1. 父组件向子组件中传递数据 2. 子组件向父组件中传递数据 一般情况下, 1中情况可通过props解决数据传递的问题, 这里就不多赘述了. 子组件向父组件中传递数据 主要谈谈2中情景的实现,有三种方式: 一. 通过props,父组件向子组件中传递数据和改变数据的函数,通过在子组件中调用父组件传过来的函数,达到更新父组件数据(向父组件传递数据)的作用(子组件中需要有相应的响应事件) 二. 通过在子组件中触发一个 自定义事件(vm.$emit),将数据作为v

  • Vue中实现过渡动画效果示例代码

    Vue中实现过渡动画效果示例代码

    目录 Vue的transition动画 Transition动画的使用 Transition组件的原理 Transition动画的class Vue的animation动画 Animation动画的使用 同时设置两种动画(了解) 过渡的模式mode 列表过渡 列表过渡的介绍 列表过渡的使用 Vue的transition动画 Transition动画的使用 在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验: React框架本身并没有提供任何动画相关的API,所以在R

  • Vue中封装input组件的实例详解

    Vue中封装input组件的实例详解

    Vue中封装input组件 最近有点忙不过来 脱了很久,没有更新 抱歉.今天要将的时如何自定义封装input组件 ,博主知识发个简单的模板 码友们可以更具自己的实际项目添加需要的参数 我的项目中的UI图是这样的 代码如下 子组件的模板设置 <template> <div class="completion-input-box"> <span class="input-box-name">{{text}}</span>

  • Spring Boot/VUE中路由传递参数的实现代码

    在路由时传递参数,一般有两种形式,一种是拼接在url地址中,另一种是查询参数.如:http://localhost:8080/router/tang/101?type=spor&num=12.下面根据代码看一下,VUE 和 Spring Boot 中各自是如何处理传递和接受参数的. Spring Boot package com.tang.demo1.controller; import org.springframework.web.bind.annotation.*; @RestContro

随机推荐