VUE异步组件-处理加载状态在路由组件中使用无效

最新推荐文章于 2025-06-24 12:51:45 发布

原创最新推荐文章于 2025-06-24 12:51:45 发布 · 2.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一种在Vue中实现异步组件懒加载的方法，通过定义lazyLoadView函数，可以为异步组件添加加载中、加载失败及延迟显示等功能，提高用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决方法：

function lazyLoadView(AsyncView) {
  const AsyncHandler = () => ({
    component: AsyncView,
      // A component to use while the component is loading.
    loading: require('@/view/system/Loading.vue').default,
      // A fallback component in case the timeout is exceeded
      // when loading the component.
    error: require('@/view/system/Timeout.vue').default,
      // Delay before showing the loading component.
      // Default: 200 (milliseconds).
    delay: 200,
      // Time before giving up trying to load the component.
      // Default: Infinity (milliseconds).
    timeout: 10000
  });
  return Promise.resolve({
    functional: true,
    render(h, { data, children }) {
        // Transparently pass any props or children
        // to the view component.
      return h(AsyncHandler, data, children);
    }
  });
}
const My = () => lazyLoadView(import('@/view/My.vue'));
const router = new VueRouter({
  routes: [
    {
      path: '/my',
      component: My
    }
  ]
})