异步组件-处理加载状态

最新推荐文章于 2024-05-27 11:32:02 发布
最新推荐文章于 2024-05-27 11:32:02 发布
阅读量250 收藏
点赞数
原文链接：https://juejin.cn/post/6844903670937550861
版权
本文介绍了如何在 Vue.js 中实现动态组件的懒加载，通过 `lazyLoadView` 函数结合 `import()` 语法，延迟加载路由组件，提高应用的性能。示例中展示了如何设置 `loading` 和 `error` 回退组件，并配置延迟和超时时间。
摘要由CSDN通过智能技术生成 




function lazyLoadView (AsyncView) {
  debugger
  const AsyncHandler = () => ({
    component: AsyncView,
    loading: require('@/components/RouteLoading.vue').default,
    error: require('@/components/RouteError.vue').default,
    delay: 200,
    timeout: 10000
  })
  return Promise.resolve({
    functional: true,
    render (h, {data, children}) {
      return h(AsyncHandler, data, children)
    }
  })
}

    const helloVue = () => lazyLoadView(import('@/components/helloVue'))
    {
      path: '/helloVue',
      name: 'helloVue',
      component: helloVue
    }

作者：fisher-zh
链接：https://juejin.im/post/5b90d0fcf265da0aa81bd728
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

迷之珊瑚
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ViewPager 懒加载 lazyload
ttlan的博客
07-08 298
ViewPager 懒加载 lazyload 嵌套fragment
lazy-load:这是一个延迟加载的 javascript 文件，它将更好地为您工作。用法
06-03
这是一个延迟加载的 javascript 文件，它将更好地与您合作。 用法：第一步，您应该将名为“lazy”的类添加到将使用延迟加载的图像中。 然后将默认 src 设置为其 src，并将真实 src 设置为名为“data-src”的属性。 最后，为 [removed] 调用函数 myScrollListener 并为 [removed] 调用 firstLoad。仅此而已！ 如此简单，如此快速。
配合vue-route更优雅的实现懒加载（lazy-load），显示Loading加载状态
maxwheel的博客
08-25 3506
一般情况下，在Vue中引入组件，我们都会使用： import MyComponent from './MyComponent.vue'; 在大型项目中，我们经常需要进行分隔代码（split code），以免产生过大的单一文件。Vue router的文档中有推荐的使用方式： const MyComponent = () => import('./MyComponent.vue'); 结合webpack的配置，在build过程中此chunk会被从app.js提出单独打包。在前端页面路由到相应功
Vue 如何处理异步组件加载错误
最新发布
前端开发博客
05-27 719
大家好，我是宝哥。本周我会分享下面一系列的Vue教程，欢迎关注我。Vue 如何处理异步组件加载错误（当前）Vue、Nuxt 和 Vite 技巧、窍门和实践的集合我是如何发现没有在 Vue SPA 中将 EventListeners 放在挂载上的开源 Vueform 中的新 phone 元素Vue DevTools Next v7.2 发布尤大谈 Vite & Vue 2024 状态在工作了...
vue3中的异步组件
九仞山的专栏
06-09 7313
详细介绍了vue3中的异步组件及Suspense组件
Vue异步组件处理路由组件加载状态
weixin_33947521的博客
09-06 295
问题场景 在大型单页面应用中，处于对性能的考虑和首屏加载速度的要求，我们一般都会使用webpack的代码分割和vue-router的路由懒加载功能将我们的代码分成一个个模块，并且只在需要的时候才从服务器加载一个模块。 但是这种解决方案也有其问题，当网络环境较差时，我们去首次访问某个路由模块，由于加载该模块的资源需要一定的时间，那么该段时间内，我们的应用就会处于无响应的状态，用户体验极差。 解决方案...
Vue异步组件处理路由组件加载状态的解决方案
10-18
2. **使用异步组件显示加载状态**：在路由组件中使用异步组件并添加加载和错误处理状态。当组件正在加载时，显示一个加载指示器（例如“加载中”组件），加载失败时显示错误提示（如“加载失败”组件）。 具体实现...
详解angularjs利用ui-route异步加载组件
10-19
在本文中，我们将深入探讨如何在AngularJS项目中利用ui-router进行异步组件加载，以优化应用程序性能并减小资源占用。ui-router是AngularJS的一个扩展，提供了更强大的路由功能，包括视图嵌套和状态管理，使得在大型...
vue-cli监听组件加载完成的方法
10-18
这种方法通过Vuex的全局状态管理，使得我们可以方便地追踪组件的加载状态，并在所有组件加载完成后执行特定的逻辑。请注意，这种方法适用于组件之间有依赖关系或者需要在所有组件加载完毕后执行一次性操作的情况。...
高阶组件+hooks+异步组件-1205(1)1
08-04
异步组件是React中处理加载延迟的一种方式，主要用于优化大型应用的性能。当组件需要较长时间才能加载时，可以使用异步组件来避免阻塞整个应用程序的渲染。在上述代码中，虽然没有直接使用异步组件，但它们通常用于...
vue-lazyload和v-viewer冲突问题
殇蓝的博客
08-11 1105
测试环境和生产环境都无问题（都是build后的代码） vue-lazyload是vue的懒加载插件，v-viewer是个图片的预览插件，版本分别是1.3.1和1.4.2，存在一个问题就是懒加载插件正常执行，但是预览插件在初次加载后图片点击失效，只有页面强制重排后才会再次生效； 目前根据源码定位后发现是懒加载插件v-lazy中的add,update中影响了预览插件中对于图片的默认初始，导致预览插件的点击预览失效； 本地解决方式，因为v-lazy替代了之前的src属性，所以测试结果是两者兼具，可以保证懒加载和.
前端如何实现图片懒加载(lazyload) 提高用户体验
octopus的专栏
02-17 7266
定义 图片懒加载又称图片延时加载、惰性加载，即在用户需要使用图片的时候加载，这样可以减少请求，节省带宽，提高页面加载速度，相对的，也能减少服务器压力。  惰性加载是程序人性化的一种体现，提高用户体验，防止一次性加载大量数据，而是根据用户需要进行资源的请求。 实现 懒加载的难点在于确定某张图片是否是用户需要的资源，在浏览器中，用户需要的是可视区内的资源，因此我们只需要判断图片是否
使用LazyViewPager，实现完整的懒加载ViewPager
May-gemini的博客
10-24 2088
功能：利用懒加载类LazyViewPager实现完整的不预加载ViewPager，同时在类中添加一个函数用于控制是否支持横向滑动切换ViewPager(适用于有些fragment包含可左滑删除的列表，禁用左右切换ViewPage方可实现左滑删除功能，防止滑动事件冲突)。 以下主要讲的是Acitvity中如何利用LazyViewPager类实现懒加载ViewPager，可以点击tab切换或者滑动切...
Vue进阶-异步动态加载组件
qq_37021136的博客
03-01 4664
文章目录前言一、为什么会出现这种情况?二、常用解决办法1.使用v-if来判断是否有数据来展示dom结构(一般般)2.通过$set来触发Vue的数据重新渲染机制(鸡肋)3.通过监听子组件数据源来实现子组件数据动态改变(基本完美)前后变化 前言 此篇文章缘起于在业务开发中需要使用父子组件嵌套,子组件的数据源来自于父级的一个接口请求, 虽然这个我们的后端同学接口有redis缓存,但是身为一个前端码农,本着挖掘的思想,开始了父子组件能之间如何优化, 避免由于数据延迟导致子组件数据为空的情况(虽然v-if判断DO
动态组件&异步组件
JustinNeil的博客
08-21 1066
动态组件&异步组件动态组件在动态组件中使用keep-alive异步组件处理加载状态 动态组件 在动态组件中使用keep-alive   我们可以在一个多标签的界面中使用 is 特性来切换不同的组件： <component v-bind:is="currentTabComponent"></component>   当在这些组件之间切换的时候，你有时会想保持这些组件...
(三) -动态组件和异步组件——使用 keep-alive和:is 保存动态组件的状态 & 路由的懒加载，就是加载异步组件-用到的时候加载，不用的时候不加载
weixin_44867717的博客
03-18 517
动态组件和异步组件——使用 keep-alive 和:is保存动态组件的状态 & 路由的懒加载，就是加载异步组件-用到的时候加载，不用的时候不加载 例如：登录和注册切换的时候——类似于v-show，但其不能缓存组件 地址： 动态组件和异步组件 动态组件 什么是动态组件： 就是几个组件放在一个挂载点下，然后根据父组件的某个变量来决定显示哪个，或者都不显示。 动态切换：（:is后面...
vue异步组件按需加载
HeavenPeakMan的博客
07-27 802
vue异步组件按需加载
vue异步加载组件白屏
08-18
当在Vue中使用异步加载组件时，有时候可能会遇到白屏的问题。这通常是由于异步加载组件的过程中，加载时间过长导致的。以下是一些常见的解决方法： 1. 添加加载状态：在异步加载组件的过程中，可以添加一个加载状态，显示一个loading界面或者加载动画，以提供用户反馈。这可以通过在组件的data中添加一个isLoading的状态来实现，并在加载完成后将其设置为false。 ```javascript data() { return { isLoading: true, // 初始加载状态为true component: null, // 初始化组件为null }; }, mounted() { import('./AsyncComponent.vue') .then((component) => { this.component = component.default; // 导入组件 }) .catch((error) => { console.error('Failed to load component:', error); }) .finally(() => { this.isLoading = false; // 加载完成，loading状态为false }); }, ``` 然后，在模板中根据isLoading状态来显示不同的内容： ```vue <template> <div> <!-- 根据isLoading状态显示不同内容 --> <div v-if="isLoading"> <!-- 显示loading界面或加载动画 --> <Loading /> </div> <div v-else> <!-- 异步加载的组件 --> <component :is="component" /> </div> </div> </template> ``` 2. 代码拆分与懒加载：Vue支持代码拆分和懒加载，可以将组件按需加载，避免在初始加载时就加载所有组件。可以使用`import()`函数进行动态导入组件。 ```javascript Vue.component('AsyncComponent', () => import('./AsyncComponent.vue')); ``` 这样，组件将会在需要使用时才进行加载，减少了初始加载的资源量。 3. 预加载组件：如果某个组件在初始加载时不会被立即使用，但是会在后续被频繁使用，可以考虑使用Vue提供的`Vue.component`的`preload`函数来预加载组件。这样可以在初始加载时就预先加载该组件，避免后续使用时的延迟。 ```javascript Vue.component('AsyncComponent', () => import('./AsyncComponent.vue').then(m => m.default), { preload: true }); ``` 通过以上方法，可以解决异步加载组件导致的白屏问题。希望对您有所帮助！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值