<pre class="hljs"><code class="language-typescript">
const routes = [
path:'abcd', component: import('path/abcd.vue')
];</code></pre>다이렉트로 위처럼 사용하거나, <pre class="hljs"><code class="language-typescript">import abcd from 'path/abcd.vue';

const routes = [ path:'abcd', component: abcd];</code></pre>이렇게 쓰면 어떤 문제가 발생하나요?

안녕하세요.해당 문법은 <a target="_blank" rel="noopener noreferrer nofollow" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import">dynamic imports</a> 문법으로 Vue Router에서 <a target="_blank" rel="noopener noreferrer nofollow" href="https://router.vuejs.org/guide/advanced/lazy-loading.html">Lazy Loading(지연 로딩) Routes</a> 설정시 유용하게 사용할 수 있습니다. 이때 이점은번들링시 각 컴포넌트 파일로 분할하여 해당 경로에 방문했을 경우에만 로드할 수 있어 더 효율적입니다.아래 링크에서 더 자세한 설명을 확인할 수 있습니다.<a target="_blank" rel="noopener noreferrer nofollow" href="https://router.vuejs.org/guide/advanced/lazy-loading.html">https://router.vuejs.org/guide/advanced/lazy-loading.html</a>

반응형 라우터쪽 구글링 해보면 도움될거예요&nbsp;

인프런 커뮤니티 질문&답변

router.js 에서 component : ()=>import. 형태로 사용하는 이유가 무엇인가요?