[Udemy Vue 완벽가이드 Section16] 237. 라우트 페이지 컴포넌트 추가하기

src폴더에 pages 폴더를 추가한다.

이 폴더에는 라우팅을 통해 페이지로서 로딩되는 컴포넌트들이 포함된다.

반드시 이렇게 pages 폴더를 생성할 필요는 없지만, 페이지로서 로딩되지 않는 다른 컴포넌트들과 구분하는 편을 선호한다.

 

pages폴더 내에는 두 개의 하위폴더를 만든다. → coaches, requests

이 앱의 두 가지 주요 기능에 해당하는 폴더가 된다.

그리고 pages 폴더 내에는 NotFound.vue 컴포넌트 파일을 추가해준다.

Not Found 페이지에 대한 컴포넌트. 

 

coaches 하위폴더 내에는 코치 관련 내용, 코치로 등록하는 페이지 등 코치에 관련된 페이지가 모두 포함된다.

 

 

# App.vue

App.vue 컴포넌트를 생성해보자.

이 파일이 우리 애플리케이션의 일종의 메인 엔트리 포인트가 될 거다.

 

App.vue의 템플릿에는 <router-view>를 렌더링해 router-view를 출력함으로써, Vue라우터에게 우리가 등록한 다양한 컴포넌트를 렌더링할 위치를 지정해준다.

 

# main.js

main.js파일 내에는 App파일을 불러온다.

그리고 App이 라우터를 인식하도록 만들어줘야하니

router 또한 불러온 뒤,

해당 App을 상수 app에 저장한다.

그리고 app.use(router)를 통해 앱 내에서 라우터를 실제로 사용한다.

import { createApp } from 'vue';

import router from './router.js';
import App from './App.vue';

const app = createApp(App);

app.use(router);
app.mount('#app');

 

 

이제 라우팅은 모두 끝났다.

 

이제 등록한 컴포넌트 파일들에 생기를 불어넣어 줄 차례다.

 

뭘 먼저 할지는 사람에 따라 다르지만, 결국에는 누군가가 도메인을 통해 앱을 방문하게 되면 /coaches로 리디렉션이 되므로, 사용자들이 일반적인 방법으로 앱을 방문할 시 처음으로 보게 될 페이지는 바로 이 페이지이다.

 

 

그럼 CoachesList 페이지부터 시작하면 좋을 것 같다.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.