Vue Router (뷰 라우터)

정다윤·2021년 9월 12일

SPA에 대하여

일반적으로 웹 어플리케이션은 해당 웹 페이지를 서버레 요청하고, 서버가 html을 돌려줬을 때 그것을 랜더링 엔진을 통해 호면에 보여준다.
SPA는 해당 화면에 대한 정보를 미리 가지고 있다가, 해당 화면으로 넘어갈 때 서버에 요청하는 것이 아니라 클라이어트 내부적으로 라우터를 이용해서 서버에 요청하지 않고(데이터를 받아오지 않고)도 화면을 매끄럽게 전환할 수 있게 해준다.

Vue는 코어 라이브러리 외의 Router 라이브러리를 공식 지원하고 있고, 아래와 같이 설치한다.

npm install vue-router [--save]

Vue 라우터는 기본적으로 RootUrl/#/{Router name} 의 구조로 되어 있다.

npm install vue-router [--save]

여기서 #태그 값을 제외하고 기본 URL방식으로 요청때마다 index.html을 받아 라우팅을 하려면

const router = new VueRouter({
routes,
//아래와 같이 history 모드를 추가해주면 된다.
mode: 'history'
})

기본 라우터

뷰의 라우팅 기능을 이용하기 위해서 router-link태그를 사용한다. 이것은 a태그로 변환된다
index.html

<!DOCTYPE html>
<html>
 <head>
   <meta charset="urf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Vue Router Sample</title>
  </head>
  <body>
   <div id="app">
    <h1>Hello Vue Router!</h1>
    <p>
     <router-link to="/foo">Go to Foo</router-link>
     <router-link to="/bar">Go to Bar</router-link>
    </p>
    <router-view></router-view>
   </div>
   
<script src="js/vendor/vue.js"></script>
<script src="js/vendor/vue-router.js"></script>
<script src="js/app.js"></script>