[Vue.js] vue-router #1

SOLEE_DEV·2021년 1월 9일
0

Vue.js

목록 보기
1/9
post-thumbnail

본 포스팅은, 뷰 라우터 공식 문서(https://router.vuejs.org/kr/guide/essentials/history-mode.html)와
'캡틴판교의 Cracking Vue.js' 내용에 기반하여 작성된 포스팅입니다.
자세한 내용은 공식 문서와 '캡틴판교의 Cracking Vue.js'를 참조해주세요!

1. Vue-router

Vue 라이브러리를 이용하여 SPA를 구현할 때 사용하는 페이지 이동 라이브러리

주요 기능

  • 중첩된 라우트/뷰 매핑
  • 라우터 파라미터, 쿼리, 와일드 카드 설정
  • Vue.js의 트랜지션 시스템을 이용한 트랜지션 효과
  • HTML5 히스토리 모드 또는 해시 모드 등등

2. 설치, 등록 방법

  • 뷰 라우터 설치
npm install vue-router
  • 뷰 라우터 등록 방법
// Vue 2.x 환경

// 1. 라우터 인스턴스 생성
var router = new VueRouter({
  // 라우터 옵션
})

// 2. 인스턴스에 라우터 인스턴스를 등록
import router from './router'

new Vue({
  router: router
})

// Vue 3.x 환경
import router from './router'

const app = createApp(App)
  .use(router);

3. Vue-router Option

vue-router 3에서의 라우터 옵션 설정 방법인 mode : 'history'에서 더 유ㅇ연한 옵션으로 대체됨.
사용 중인 모드에 따라 적절한 기능으로 교체

  • "history": createWebHistory()
  • "hash": createWebHashHistory()
  • "abstract": createMemoryHistory()

모드

  • routes : 라우팅 할 URL과 컴포넌트 값 지정
  • mode : URL의 해쉬 값 제거 속성
  • abstract : 모든 자바 스크립트 환경에서 작동 (서버 측 브라우저 API가 없는 경우, 라우터가 자동으로 이 모드로 강제 전환)

// router/index.js로써 관리
import { createRouter, createWebHistory } from 'vue-router'

createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/login', component: LoginComponent },
    { path: '/home', component: HomeComponent }
  ]
})

history mode

  • 라우팅을 할 때 URL에 #값을 제거하고, URL값이 /login/home일 때 각각 로그인 컴포넌트와 홈 컴포넌트를 뿌려줌

4. router-view

브라우저의 주소 창에서 URL이 변경되면, 앞에서 정의한 routes 속성(#3.)에 따라, 화면에 컴포넌트가 뿌려진다. 이 때 뿌려지는 지점이 템플릿의 router-view이다.

  <div id="app">
    <router-view></router-view> <!-- LoginComponent 또는 HomeComponent -->
  </div>

앞에서 정의한 라우팅 옵션 기준으로 /login은 로그인 컴포넌트를 /home은 홈 컴포넌트를 화면에 표시

화면에서 특정 링크를 클릭해서 페이지를 이동할 수 있게 돕는 태그 (== a 태그)

<div>
  <router-link to="/login"></router-link>
</div>

이 때, 위 코드를 실행하면 화면에서는 <a> 태그로 변형되서 나옴 때문에 <a>를 클릭하면, /login URL로 이동

profile
Front-End Developer

0개의 댓글