Vue 라우터 설치부터 기본 사용방법

Vue 라우터 간략 소개

vue-router는 vue.js의 공식 라우터이다. Vue.js에서 SPA(Single Page Application)을 만들기 쉽게 도와준다.

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

 

vue router 설치

vue create 명령어를 사용하여 프로젝트를 생성한다. (본 글에서는 생략, 아래 글 참고)

2020/10/28 - [Vue] - Vue 설치부터 프로젝트 생성까지

Vue 설치부터 프로젝트 생성까지

yarn 또는 npm을 이용하여 설치

$ yarn add vue-router
// OR
$ npm install vue-router --save

 

Vue Router 사용하기

Component 2개를 생성

• HomeComponent: Hello Vue 를 보여준다.
• About Component: About me 를 보여준다.

<!-- HomeComponent.vue -->
<template>
  <div>
    Hello Vue
  </div>
</template>
<script>
export default {
  name: "HomeComponent",
};
</script>

<!-- AboutComponent.vue -->
<template>
  <div>
    About me
  </div>
</template>
<script>
export default {
  name: "AboutComponent",
};
</script>

 

router.js 작성

VueRouter 인스턴스를 생성하여, 라우팅 설정을 해준다.

• / 루트로 접속하면, HomeComponent를 뿌려준다.
• /about 으로 접속하여, AboutComponent를 뿌려준다.

// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import HomeComponent from './components/HomeComponent';
import AboutComponent from './components/AboutComponent';

Vue.use(VueRouter);

// 라우트 정보
// 라우팅을 해주면서 #을 제거해주면서, path에 입력한 경로에 매핑된 컴포넌트를 보여준다.
const route = [
    {path: "/", component: HomeComponent}, // 루트(/)로 접속했을때, Home 컴포넌트를 보여준다.
    {path: "/about", component: AboutComponent}, // /about으로 접속 했을때, About 컴포넌트를 보여준다.
];

// Vue 라우터 인스턴스 생성
const router = new VueRouter({
    mode: 'history',
    routes: route
});

export default router;

 

main.js 작성

'3.2. router.js 작성'에서 생성한 router 인스턴스를 Vue 인스턴스에 넣어준다.

import Vue from 'vue'
import App from './App.vue'
import router from "./router"

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

 

서버 실행하여 확인

$ yarn run serve

 

/ 접속

 

/about 접속