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

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

作者: 爱忽悠的唐唐在晃悠 | 来源:发表于2018-07-30 16:47 被阅读54次

解决方法:

function lazyLoadView (AsyncView) {
  const AsyncHandler = () => ({
    component: AsyncView,
    // A component to use while the component is loading.
    loading: require('./Loading.vue').default,
    // A fallback component in case the timeout is exceeded
    // when loading the component.
    error: require('./Timeout.vue').default,
    // Delay before showing the loading component.
    // Default: 200 (milliseconds).
    delay: 400,
    // 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 router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: () => lazyLoadView(import('./Foo.vue'))
    }
  ]
})

相关文章

网友评论

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

      本文链接:https://www.haomeiwen.com/subject/xgifvftx.html