vuejs 동적으로 로드 처리

VUE.JS 2.X > 컴포넌트 톺아보기 > 동적 & 비동기 컴포넌트 > 비동기 컴포넌트 > Handling Loading State 샘플코드만 처음 보았을때는 이해가 안되었는데, 아래코드 보고 다시 샘플코드 보니 이해가 됨!

testAsyncLoad에서 components->asyncComponent 코드를 참고한다. loading이 표시되는 것을 확인하기 위해 Promise를 사용해서 샘플코드를 작성했지만, 실제 사용은 주석되어진 두줄 중에 하나를 사용하면 된다.

delay속성은 지정된 시간 내에 로드가 안되면, loading 컴포넌트가 표시되고, timeout시간을 초과하면 error 컴포넌트가 표시된다.

//loadError.vue
<template>
  <div>Async load error!</div>
</template>

//loading.vue
<template>
  <pulse-loader :loading="loading" :color="color" :size="size"></pulse-loader>
</template>
<script>
//https://openbase.com/js/vue-spinner
import PulseLoader from 'vue-spinner/src/PulseLoader.vue'
export default ({  
  components: { PulseLoader }
})  
</script>

//asyncComponent.vue
<template>
  <div>async-component</div>
</template>

//testAsyncLoad.vue
<template>
  <async-component />
</template>
<script>
import loadError from './loadError.vue';
import loading from './loading.vue';
const asyncComponent = import("./asyncComponent.vue");
export default {
  components: { 
    asyncComponent: ()=> ({
      //component: import("./asyncComponent.vue"),
      //component: asyncComponent,      
      component: new Promise((resolve) => {
        setTimeout(()=> {
          resolve(asyncComponent);
        }, 1000)
      }),
      loading:loading,
      error:loadError,
      delay:100,
      timeout: 3000
    })
  },
}