Vue异步组件处理路由组件加载状态的解决方案

2024-10-20 12:41:17

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异步组件处理路由组件加载状态的解决方案，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

Vue 自定义动态组件实例详解

现在基于vue的UI组件库有很多,比如iview,element-ui等.但有时候这些组件库满足不了我们的开发需求,这时候我们就需要自己写一个插件. 举第一个栗子用vue-cli搭建好项目目录之后,在src/components下面新建一个文件夹放我们要写的插件,如图所示: index.vue里写我们的组件,代码如下: index.js里面写index.vue的install方法,并用Vue.component注册组件,代码如下: 接下来我们要在默认的main.js里将刚刚写的index.js
详解vue2.0 使用动态组件实现 Tab 标签页切换效果（vue-cli）

在 vue 中,实现 Tab 切换主要有三种方式:使用动态组件,使用 vue-router 路由,使用第三方插件. 因为这次完成的功能只是简单切换组件,再则觉得使用路由切换需要改变地址略微麻烦,所以使用的是动态组件实现,如果是在大型应用上,可能使用 vue-router 会方便一些. 先看下最终实现的效果,结构比较简单,顶部的三个 Tab 标签用于切换,内容区域分别为三个子组件. 效果预览关键代码及分析如下: <template> // 每一个 tab 绑定了一个点击事件,传入的参数对应着
解析vue路由异步组件和懒加载案例

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

通过子组件定义时候的props可以支持父组件给子组件传递数据,这些定义的props在子组件的标签中使用绑定属性即可,但是如果使用的是<component>动态组件,这个时候就没有显式的子组件标签,要给子组件传递数据需要在<component> 中进行绑定 <div class="app" id="deviceready"> <component :is="currentView" :user_name.s
Vue.js动态组件解析

本篇资料来于官方文档:http://cn.vuejs.org/guide/components.html#u52A8_u6001_u7EC4_u4EF6 本文是在官方文档的基础上,更加细致的说明,代码更多更全. 简单来说,更适合新手阅读 ①简单来说: 就是几个组件放在一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示. ②动态切换: 在挂载点使用component标签,然后使用v-bind:is="组件名",会自动去找匹配的组件名,如果没有,则不显示: 改变挂载的组件,
Vue异步组件使用详解

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

本文实例讲述了Vue动态组件与异步组件.分享给大家供大家参考,具体如下: 1 在动态组件上使用 keep-alive 我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件: <component v-bind:is="currentTabComponent"></component> 当在这些组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题.例如我们来展开说一说这个多标签界面: 你会注意到,如果你选择了一篇文章,切换到
Vue动态加载异步组件的方法

背景: 目前我们项目都是按组件划分的,然后各个组件之间封装成产品.目前都是采用iframe直接嵌套页面.项目中我们还是会碰到一些通用的组件跟业务之间有通信,这种情况下iframe并不是最好的选择,iframe存在跨域的问题,当然是postMessage还是可以通信的,但也并非是最好的.目前有这么一个场景:门户需要制作通用的首页和数据概览页面,首页和数据概览页面通过小部件来自由拼接.业务组件在制作的时候只需要提供各个模块小部件的url就可以了,可是如果小部件之间还存在联系呢?那么iframe是不好
简单的Vue异步组件实例Demo

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

最近在研究vue的路上,那么今天也算个学习笔记吧! 导航按钮: <div class="tab-title"> <p @click="a='tab1'"><router-link to='/collectnewcars'>新车</router-link><em></em></p> <p @click="a='tab2'"><router-link

Vue异步组件处理路由组件加载状态的解决方案

相关推荐

随机推荐