[Vue.js] Vue Router 설치 및 설정

Vue.js를 사용하면 싱글 페이지를 구성할 수 있다는 점이 가장 흥미롭다.

 

기존에 html이나 jsp를 사용해서 프로젝트를 만드는 경우,

보통은 여러개의 페이지를 만들고 컨트롤러 단에서 모든 Request를 받아 해당 페이지를 리턴 시켜주는 형태로 구성을 했다.

이런 경우엔 URL이 변경되는 경우 서버에 매번 요청해야 하기 때문에 페이지 변경에 따라 DOM이 새롭게 갱신되었다.

 

하지만, 라우터를 사용하게 되면 페이지 이동 시 마다 서버에 요청하여 페이지를 새롭게 갱신(새로고침)하는 것이 아니라

미리 해당 컴포넌트(화면 정보)를 가지고 있다가 페이지 이동 시에 라우터를 통해 화면을 형성하게 된다.(= SPA방식)

( 라우터를 사용하게 되면 화면전환이 아주 매끄럽게 진행된다. )

 

### 참고용 vue-router 공식문서

https://router.vuejs.org/kr/guide/#html

시작하기 | Vue Router

 

 

 

- 라우터 설치

라우터 사용을 위해 npm을 이용해 설치를 한다.

// vue-router 설치
npm install --save vue-router

라우터를 전역에서 사용할 수 있게 main.js에 설정해주는데 이 때 나는 main.js안에 라우터를 구성하지 않고

새로운 인스턴스를 만들어 import 하는 형태로 구성했다.( 보통은 이런식으로 구성하는 것 같다. )

 

 

 

- 라우터 설정

##  router.js 생성

import Vue from 'vue';
import VueRouter from 'vue-router'
import join from '@/views/Join'
import login from '@/views/Login'  // 라우트 컴포넌트를 import 한다.

// 1.Vue 와 VueRouter 를 연결
Vue.use(VueRouter);

// 2. route 정의
const routes = [ 
                    {
                        path: '/login',   // url 경로
                        component : login,// 매핑하고 싶은 컴포넌트(import필요!)
                        name: (생략)       // name을 사용해서 component명을 정할 수 있지만 path로 부를 것
                    	props: {'' : ''}, // 라우팅 이동 시 파라미터 정보 전달
                        query: {'' : ''}  // 라우팅 이동 시 쿼리스트링 정보 전달
                    },
                    {
                        path: '/join',    
                        component : join,
                    }
                ]

// 3. VueRouter 에 router 등록
const router = new VueRouter({
    mode: 'history',  // URL '#'해시값 지우기 위해 설정
    routes   //  routes : routes 에서 routes : 생략
})


// 4. 설정한 VueRouter 인스턴스 export
export default router;

 

route 속성

1. path : 라우팅 하고자 하는 경로 URL

2. componenet : 해당 path로 이동 시 로드 될 컴포넌트

3. name : 라우팅 하고자 하는 컴포넌트 name

4. props : 라우팅 시 전달 될 파라미너 값

5. query  : 라우팅 시 전달 될 쿼리스트링 정보

 

 ------------------------------------------------------------

 

 

여기서 주의할 점 !

Vue.use(VouRouter)를 명시해주지 않으면 Vue와 VueRouter가 연결되지 않기 때문에

 

[Vue warn]: Unknown custom element: <router-view>

- did you register the component correctly? For recursive components, make sure to provide the "name" option.

화면에 이렇게 오류가 뜬다. (맨날 까먹어서 자주 오류냄..)

 

 

 

빠짐없이 잘 입력했다면 이제 이 router 인스턴스를 main.js 에 전역으로 설정해준다.

(라우터 객체를 Vue에 추가하는 과정)

## main.js

import Vue from 'vue'
import App from './App.vue'
import Axios from 'axios';
import router from '@/routes/router';


Vue.config.productionTip = false
Vue.prototype.Axios = Axios;

new Vue({
  render: h => h(App),
  router   // 전역으로 router 정의(라우터 객체 추가)
}).$mount('#app')

 

App.vue에서 라우팅 역할을 해주는 <router-link>와

컴포넌트가 렌더링 되기 원하는 위치에 <router-view>를 삽입해준다.

 

## App.vue

<template>
  <div id="app">
    <router-link to="/join">Go Join</router-link><br> // 라우팅 역할
    <router-link to="/login">Go Login</router-link> 


    <router-view></router-view> // 컴포넌트들이 보여지길 원하는 위치에 삽입
  </div>
</template>

<script>

export default {
  name: 'App'
}

 

 

--- 화면 : join 클릭 시---

 

---

--- 화면 : login 클릭 시---

 

이 결과, 라우터의 역할을 해주는 링크를 클릭할 때마다

렌더링 되는 컴포넌트가 달라진다는 걸 확인할 수 있다.

( 라우터 링크를 이용해서는 네비게이션 바를 만들어보면 될 듯 하다. )