흐름

1.main.js

• 프로그램의 진입점. Vue애플리케이션이 실행될 때 가장 먼저 실행되는 파일.
• 여기서 뷰 애플리케이션을 생성(createApp(App)) //여기서 App은 App.vue를 의미하며 최상위 컴포넌트다.
• app.use(router)를 통해 뷰 라우터를 앱에 등록함. 이 단계에서 indes.js에 정의된 라우터가 연결됨

2.App.vue

• main.js에 이어 실행되는 파일
• router-view는 라우터에 의해 URL경로와 매핑된 컴포넌트(화면)을 동적으로 렌더링 하는 기능
• HeaderComponent와 FooterComponent는 상단,하단에 고정적으로 위치해있는 것으로 즉, 동적으로 바뀌지 않으므로 router-view안에 포함되지 않아 따로 import를 하였다.
• 여기에 <router-view/>에 의해 여러 화면들이 라우팅 되며 화면이동이 가능해진다.
• export defualt{}는 왜 쓰일까
  • Vue에서는 각 컴포넌트가 하나의 JavaScript객체로 정의 됨.
  • 이 객체를 export default를 통해 외부로 내보내서 다른 컴포넌트나 파일에서 가져와 사용할 수 있게 하는 것!(=해당 컴포넌트를 다른 파일에서 가져와 사용할 수 있게 하는 것)
  • 따라서 화면이나 각 컴포넌트 하나를 개발 할 때 마다 script부분에 이 export default 를 붙이는 것이 일반적이다.
• export default{}안에 있는 components : {}는 어떤 컴포넌트를 내 컴포넌트 내 템플릿에서 사용하려면 import한 후 components{ }안에 등록해주어야한다. 이로 인해, 상단에서 <HeaderComponent>태그,<FooterComponent>태그가 사용가능 한 것이다.

그렇다면,<router-view/>에 의해 렌더링되는 컴포넌트(화면)들은 어디서 설정할까?

1.index.js

• index.js는 Vue Router의 설정과 초기화를 담당한다.
• 뷰 애플리케이션에서 URL경로에 따라 어떤 컴포넌트를 렌더링 할지 정의하는 파일
• const route = [{ }]에서 특정 URL로 이동했을 때 어떤 컴포넌트를 렌더링할 지 정의 하는 것이다. 여기서 경로 정보는 path,name,component속성을 가진다