[Vue.js][Ch4][영화검색 사이트] Vue Router 구성

준비

GitHub Repository 복제

• npx degit 'GitHub 계정이름'/'다운로드받을 GiitHub 저장소이름' '다운받은 폴더이름'
• Ex) degit npx degit ejkimDev/ue3-webpack-template 24_vue3-movie-app

구성

1. 구글에 vue router next 검색 > https://router.vuejs.org/ 이동 > Get Started > npm 설치법 확인

2. 프로젝트에서 vue router 4버전 일반의존성 설치 

- 일반의존성 : 프로젝트가 브라우저에서 동작할 때 같이 포함되어야 하는 패키지를 설치할 때 사용

npm i vue-router@4

3. main.js 작성

// App.vue 파일을 main.js에서 시작

import { createApp } from 'vue'   // 객체구조분해를 통해서 바로 createApp 가져옴
import App from './App'
import router from './routes/index.js'

// html에서 app이라는 id를 가지고 있는 요소에 vue.js 프로젝트를 연결
// .use : 현재 프로젝트에서 특정한 플러그인을 연결할 때 사용
createApp(App)
  .use(router)
  .mount('#app')

• ./router/index.js 파일을 router라는 이름으로 프로젝트에서 플러그인처럼 활용

4. index.js 파일 작성 (페이지를 관리해주는 구성옵션을 정리해주는 파일) - createRouter를 기본 내보내기.

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from './Home'
import About from './About'

// 기본 내보내기
export default createRouter({
  // Hash, History 모드 중 골라서 사용
  history: createWebHashHistory(),  // 
  // routes : 각각의 페이지에 연결할 컴포넌트를 만들어서 적용해줌
  routes: [     // pages(페이지들을 구분해주는 개념)
    {
      path: '/',    // 페이지의 메인페이지로 이동하겠다는 의미
      component: Home // 상단 지정된 path 페이지에 연결될 컴포넌트 지정
    },
    {
      path: '/about',
      component: About
    }
  ]
})

• history 옵션 : Hash, History 모드 중 골라서 사용
  • Hash 모드 : 모든 URL을 HASH(#) 형태로 서비스한다.  URL이 변경될 때 페이지가 다시 로드 되지 않는다.
  • 페이지를 다시 로드하지 않고 URL을 탐색할 수 있다. SPA의 단일 페이지 클라이언트앱이기 때문에 사용자가 직접 http://example.ocm/user/id에 접속하면 404 오류가 발생.
• routes 옵션 : 페이지들을 구분해주는 개념. 각각의 페이지에 연결할 컴포넌트를 만들어서 적용해준다.
  • / (메인) 페이지는 Home 컴포넌트와 연결
  • /about 페이지는 About 컴포넌트와 연결

5. routes 폴더에 Home.vue, About.vue 생성 및 작성

 

6. App.vue 작성

<template>
  <RouterView />  <!-- vue-router 패키지에서 제공하는 전체 영역에서 쓸 수 있는 RouterView 컴포넌트 사용 -->
</template>

• vue-router 패키지에서 제공하는 전체 영역에서 쓸 수 있는 RouterView 컴포넌트 사용

결과

메인 페이지

about 페이지