Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
Tags
- localStorage
- ServerSentEvent
- 실시간알림
- Partition
- node.js란
- node.js
- 열공하자
- partitioning
- mariadb
- SSE
- frontend
- 파티셔닝
- Node.js기본
- 개발자
- Lag
- EventSource
- PostgreSQL
- 성장기
Archives
- Today
- Total
써치킴의 우당탕탕 개발 블로그
[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 컴포넌트 사용
결과
'완벽하게 Vue.js' 카테고리의 다른 글
[Vue.js][Ch4][영화검색 사이트] Header - Nav (0) | 2022.04.21 |
---|---|
[Vue.js][Ch4][영화검색 사이트] Bootstrap 구성 (0) | 2022.04.21 |
[Vue.js][Ch3][컴포지션API] props, context (0) | 2022.04.20 |
[Vue.js][Ch3][컴포지션API] 기본 옵션과 라이프사이클 (0) | 2022.04.20 |
[Vue.js][Ch3][컴포지션API] 반응형 데이터(반응성) (0) | 2022.04.19 |
Comments