[Vue.js] 영화 검색 사이트 예제 - 01. Vue Router 구성

참조) https://github.com/ParkYoungWoong/vue3-movie-app

GitHub - ParkYoungWoong/vue3-movie-app

위 사이트를 만드는 것을 목표로 하는 예제 실습을 해본다.

 

cmd 창을 관리자 권한으로 실행하고 원하는 위치로 이동한 뒤 다음의 명령어를 입력한다.

npx degit ParkYoungWoong/vue3-webpack-template#eslint vue3-movie-app
// gitHub의 webpack-template 패키지를 복사한다.
cd vue3-movie-app

npm i

code . -r

 

Router 기능 구현하기

Vue.js는 단순한 뷰 계층 라이브러리이다.

그러므로 여러 페이지로 구성된 사용자 인터랙션을 갖는 홈페이지 개발의 경우 Vue.js만으로 구현이 어렵다.

이 때, 공식 플러그인인 Vue Router를 사용하면 단일 페이지 애플리케이션(SPA)를 비롯한 URL 이동이 필요한 동작을 간단히 수행할 수 있다.

 

터미널에서 다음의 명령어를 실행해 vue-router 패키지를 설치한다.

npm i vue-router@next

 

Router 기능을 구현하기 위해서는 실제 루트 정보를 담을 routes 폴더와 index.js가 필요하다.

1. src 내부에 routes 폴더를 생성한 뒤 내부에 index.js 파일을 생성하고 기본 내용을 작성한다.

index.js의 기본 내용

history의 옵션은 해쉬모드 / 히스토리 모드를 고르는 것

routes는 페이지들의 정보를 담는 배열 객체이다. 특정 주소를 참조하면 해당되는 컴포넌트를 실행시키는 역할.

해쉬 모드
메인 도메인 뒤 쪽에 /#/을 이용하여 페이지에 접근하는 모드.
특정 페이지에서 새로고침 시도 시 페이지를 찾지 못하는 오류를 방지한다.
히스토리 모드는 서버쪽에 세팅을 해야하므로 지금은 해쉬모드를 사용한다.

2. Router 기능을 사용한다는 것을 연결하기 위해 main.js의 내용 또한 수정한다.

3. routes에 Home.vue, About.vue, Movie.vue를 생성한 뒤 index.js에 연결한다.

페이지를 확인하는 정보만 기재한 채 만들어둔다.

index.js를 위와같이 업데이트한다.

4. App.vue 파일의 Template 부분에 RouterView를 선언한다.

RouterView는 Vue-router 패키지에서 전역적으로 제공하는 컴포넌트이다.

개발서버를 실행시킨뒤 주소 끝에 about 또는 movie를 입력하면 페이지가 잘 전환되는 것을 볼 수 있다.

/ 이후 내용에 따라 라우팅이 된다.