[Vue.js 로 Front-End 개발하기] 02. Vue.js의 router 활용하기

이전 포스팅에서 vue.js의 기본적인 개발환경 세팅과 프로젝트를 생성하여 

로컬 서버에 올려 구동시키는 것 까지 정리했었다.

 

이번 포스팅에서는 Vue의 router기능을 활용하여 SPA(Single page application) 구현을 정리해보도록 하겠다. 

 

최초 터미널에서 vue create {  }를 사용하여 프로젝트를 생성하면

 

 

app.vue 파일이 아래와 같이 생성된다.

 

 

 

여기서 한 가지 더 유용한 구글 크롬 플러그인을 설치해 보도록 하겠다.

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

아래 주소로 들어가면 바로 chrome에 추가할 수 있다.

 

 

 

 

 

이 플러그인을 설치하면 아래 사진과 같이 vue.js로 만들어진 페이지를 디버깅하는데 

많은 도움을 주는 플러그인이다.

 

 

설치한 크롬 vue 플러그인으로 위의 코드를 분석해보면

아래 사진과같다.

 

 

components 밑의 HelloWorld.vue 파일을 HelloWorld로 import 하여 componets에 등록하고 

HelloWorld를 페이지의 logo 이미지 밑에 보여준다 이런 식이다.

 

 

 

우리는 이 HelloWorld 페이지를 사용할 것이 아니기 때문에 전부 삭제를 해준 뒤

간단히 Hello World만 찍어보도록 하겠다.

 

 

 

자 이제 본격적으로 router를 사용해 보자.

 

터미널에 npm install vue-router -save를 입력해 준다.

여기서 -save는 package.json 파일에 자동으로 dependencies에 등록해준다.

 

 

 

 

 

그다음 src 폴더 밑에 router폴더를 생성해주고 그 밑에 router 될 설정 파일인 index.js파일을 만들어주고

간단히  test와 test 1란 이름의 간단한 페이지 2개만 추가해 보겠다.

 

 

import Vue from 'vue';
import VueRouter from 'vue-router';
import test from '../views/test.vue';
import test1 from '../views/test1.vue';

Vue.use(VueRouter);

export const router = new VueRouter({
  routes:[
    {
        //  path : url 주소
        path: '/test',
        // component: url 주소로 갔을 때 표시될 컴포넌트
        component: test,
    },
    {
      path: '/test1',
      component: test1,
    }
  ]
});

 

 

 

 

 

그다음 라우트 될 페이지를 만들어주자.

위와 마찬가지로 src 밑에 views라는 폴더를 만들어 그 밑에 test.vue 와 test1.vue를 만들어 주자.

/* test.vue */

<template>
    <dir>test page 1</dir>
</template>

<script>
export default {

}
</script>

<style>

</style>


/* test1.vue */

<template>
    <dir>test page 2</dir>
</template>

<script>
export default {

}
</script>

<style>

</style>

 

 

 

 

 

다음 app.vue 파일에서 div안에 Hello World라고 코딩해 놓았던 것을

이제 router-view로 바꿔준다.

 

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>

export default {

}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

 

 

 

 

main.js에서도 우리가 만든 router를 import 해준다.

import Vue from 'vue'
import App from './App.vue'
import { router } from './router/index.js';

Vue.config.productionTip = false

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

 

 

 

 

 

 

위와 같이 코딩을 마친 후 npm run serve를 터미널에 입력 후 router에서 입력한 path 'test'와 'test1'로 접속해보자.

 

 

/test로 접속하면 우리가 입력한 test page 2가 root -> app -> test로 정상적으로 출력될 것이다.

 

 

이번 포스팅에서는 router를 설치하고 적용하는 방법을 정리해 보았습니다.

 

그럼 다음 포스팅에서 다시 돌아오겠습니다.