영화 검색 사이트 만들기
vue Router란?
특정한 페이지를 만들 떄 페이지를 구분하기 위해 사용하는 기술입니다.
구글 검색 창에 vue-router next로 검색을 하면 vue.js의 3버전으로 vue-router에 대한 네비게이션을 확인할 수 있습니다.
▶vue router@next
1. npm으로 설치
npm install vue-router@4vue-router가 웹사이트의 페이지를 관리해주는 기능으로 사용이 되기 때문에 프로젝트가 실제로 브라우저에서 동작할 때 포함될 수 있도록 개발의존성이 아니라 일반 의존성으로 설치를 합니다.
2. src > main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './routes/index.js' ✅
createApp(App)
.use(router) ✅
.mount('#app') router라는 이름으로 ./routes.index.js파일을 가지고 와 그 파일의 기본적인 구성옵션(페이지를 관리해주는 기능)을 use라는 키워드로 프로젝트에 연결을 합니다.
use메소드
- 현재의 프로젝트에 특정한 플러그인을 연결할 때 사용을 합니다.
3. src > routes > index.js
두 번째 과정에서 명시한대로 주변에 routes라는 폴더를 만들어줍니다. 그리고 routes폴더 안에 index.js파일을 생성해줍니다.
이렇게 만들어진 index.js파일이 페이지를 구성해주는 하나의 구성 파일이 될 것입니다.
3-1 import
vue-router에서 createRouter, createWebHashHistory 두개의 메소드를 가지고와 연결해줍니다. 이 두가지 메소드를 가지고 기본적인 페이지를 구성해서 내보내기를 할 예정입니다.
이렇게 내보낸 내용을 main.js에서 router라는 이름으로 받아서 하나의 플러그인으로 프로젝트에 적용을 하게 됩니다.
import { createRouter, createWebHashHistory } from 'vue-router'
export default createRouter({})3-2 createRouter구성옵션
export default createRouter({
history: createWebHashHistory(),
routes: [
{
path: '/',
component: ''
},
{
path: '/about',
component: ''
},
]
})1. history옵션
- Hash모드와 history모드로 구분되어 있습니다. 이번 프로젝트에서는 Hash모드를 이용할 예정입니다.
- Hash모드:
- 특정한 주소의 검색페이지로 이동하고 싶은 경우 도메인 뒤쪽에#/를 붙여서 접근하는 모드입니다. ex)https://google.com/#/search- 해시모드를 사용해야지만 특정페이지에서 새로고침을 했을 때 페이지를 찾을 수 없다는 메세지를 방지할 수 있습니다.
- 해시모드를 사용하지 않기 위해서는 history모드를 사용해야합니다. 이경우 기본적으로 서버에 세팅을 해야합니다.
2. routes옵션
- 페이지를 구분해주는 용도로 사용됩니다. 배열을 받습니다.
- path 옵션: 페이지를 구분해주는 각각의 경로를 의미합니다.
'/'의 경우 가장 메인페이지로 이동합니다. - component 옵션: path옵션에서 정해진 경로에 접근 했을 때 vue.js의 어떠한 component를 연결해서 사용할 것인지를 명시해줍니다.
4. src > routes > Home.vue & About.vue
각각의 페이지에 접근했을 때 사용할 component인 Home.vue와 About.vue를 routes라는 폴더에 만들어줍니다.
Home.vue
<template>
<h1>Home!</h1>
</template>About.vue
<template>
<h1>About!</h1>
</template>5. vue파일 연결
vue 컴포넌트 파일을 가지고 와 index.html파일의 각각의 경로부분에 연결해줍니다.
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from './Home' ✅ //확장자명 생략이 가능도록 webpack을 설정해놓았습니다.
import About from './About' ✅
export default createRouter({
history: createWebHashHistory(),
routes: [
{
path: '/',
component: Home
},
{
path: '/about',
component: About
},
]
})지금까지 작성 내용 정리
지금까지 Home와 About이라는 두개의 페이지를 만들었습니다.
그리고 vue-router을 통한 페이지 관리에 대한 기본적인 구성옵션을 index.js에 정리해주고, 그렇게 만들어진 파일을 main.js에 가지고 와서 router라는 이름으로 플러그인처럼 사용하는 것입니다.
6. App.vue파일
이렇게 만들어진 내용이 정상적으로 출력될 수 있도록 App.vue파일을 작성해줍니다.
6-1 RouterView 컴포넌트
router-view
- 라우터를 생성한 컴포넌트에 router-view태그를 선언하면 URL에 맞게 컴포넌트들이 맵핑됩니다.
main.js가 동작을 하게 되면 App.vue파일이 createApp으로 연결되어 있기 때문에 가장 먼저 실행이 되게 됩니다.
이렇게 가장 먼저 App.vue파일이 읽힐 때 vue-router패키지에서 제공하는 전체 영역에서 쓸수 있는 전역화되어 있는 RouterView(router-vue)라는 컴포넌트를 바로 사용을 해서 RouterView라는 컴포넌트 영역에서((1)부분) Home, About페이지를 출력하게 만들어줍니다.
App.vue
<template>
<RouterView /> ---(1)
</template>7. 개발서버 오픈
터미널
$ npm run dev
정상적으로 작동을 하고 있는 것을 확인할 수 있습니다.
이렇게 vue-router라는 패키지를 활용해서 프로젝트의 페이지를 구분해줄 수 있습니다.
