Vue 프로젝트 Router 구성

 

Vue Router

 

특정한 사이트를 제작할 때 페이지를 구분하는 것이 라우터 기술

-> 일반적으로 뷰에서 화면이 전환될 때, 전환하는 행위를 Route 라고 표현

-> Vue에서는 SPA를 제작할 때 라우팅 라이브러리로 Vue Router 를 제공

 

Vue.js를 사용한 싱글 페이지 앱을 쉽게 만들 수 있도록 Vue.js의 코어와 긴밀히 통합되어 있습니다.

 

아래의 기능을 포함합니다.

• 중첩된 라우트/뷰 매핑
• 모듈화된, 컴포넌트 기반의 라우터 설정
• 라우터 파라미터, 쿼리, 와일드카드
• Vue.js의 트랜지션 시스템을 이용한 트랜지션 효과
• 세밀한 네비게이션 컨트롤
• active CSS 클래스를 자동으로 추가해주는 링크
• HTML5 히스토리 모드 또는 해시 모드(IE9에서 자동으로 폴백)
• 사용자 정의 가능한 스크롤 동작

 

구성 순서

 

1. vscode vue3-webpack-template 다운로드

2. npm install vue-router@4  (뷰 라우터 설치)

3. /src/routes 폴더 생성

4. /src/routes/index.js, /src/routes/Home.vue, /src/routes/About.vue 파일 생성

 

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './routes/index.js'

/* .use() 특정한 플러그인 연결 */
createApp(App)
  .use(router)
  .mount('#app')

 

index.js

/* 페이지를 관리해주는 구성 파일 */
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from './Home'
import About from './About'

/* createRouter()를 기본 내보내기 */
/* main.js 에서 router 라는 이름으로 받아서 하나의 플러그인으로 프로젝트에 적용 */
export default createRouter({
  // Hash 모드
  // 예시 - https://google.com/#/search
  history: createWebHashHistory(),
  // pages (페이지를 구분)
  routes: [
    {
      // 페이지를 구분해주는 각각의 경로
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

 

Home.vue

<template>
  <h1>Home!</h1>
</template>

 

About.vue

<template>
  <h1>About!</h1>
</template>

 

App.vue

<template>
  <RouterView />
</template>

 

동작 순서

main.js -> App.vue  RouterView(Home.vue, About.vue)

 

실행 결과

 

 

---

 

참고

https://next.router.vuejs.org/

Vue Router