Router

1. Vue란?
2. Vue 인스턴스
3. Vue 컴포넌트
4. Vue 프로젝트 생성해보기 (이제 스프링을 곁들인...)
5. Axios
6. Router

 

Vue Router란?

Vue에서 라우팅 기능을 사용할 수 있게 해주는 라이브러리

 

Routing이란?

어떤 네트워크 안에서 통신 데이터를 보낼 때 최적의 경로를 선택하는 과정이다. Vue에서는 route로 모듈을 구현해서 path와 component를 설정해서 해당 path로 접근하면 설정 해놓은 컴포넌트가 보여지는 것으로 사용했었다.

 

 

구현

Vue 프로젝트를 생성할 때 default 설정이 아닌 manually로 선택을 하면 router와 Vuex를 선택하는 곳이 있다. 프로젝트를 설정할 때

 

router를 선택하거나 아니면 명령어로 install을 해준다.

 

Router 설치 명령어

vue add router

이렇게 명령어를 입력하면 'Use history mode for router?'라는 메시지가 나온다. router를 사용하면 url 부분에 #이 나오는데 그것을

 

없애준다.

 

이제 프로젝트로 돌아가서 src폴더로 들어가보면 router라는 폴더가 생긴 것을 볼 수 있다.

 

router 폴더의 index.js에 들어가보면

 

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '@/views/Home';

Vue.use(VueRouter);

const routes = [ // 라우터 설정을 해서 url 에서 /뒤에 오는 값에 따라 화면을 다르게 보여줄 수 있다.
  {
    path: '/',
    name : 'Home',
    component: Home,
  },
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

export default router;

이렇게 되있는데, path: '/'는 '/'로 진입하면 Home이라는 컴포넌트를 보여준다는 뜻이다.

 

실제로 Home 컴포넌트를 수정해서 화면에 띄워 보겠다.

<template>
  <v-app>
    <div>
      Home Component~
    </div>
  </v-app>
</template>
<script>

export default {
  name: 'Home',
};
</script>

Vue 프로젝트에서 첫 화면은 App.vue에서 보여주므로 App.vue파일을 설정해주면 된다.

 

<template>
  <v-app>
      <router-view/>
  </v-app>
</template>

<script>

export default {
  name: 'App',

  data: () => ({
    //
  }),
};
</script>

router는 사용 할 수 있는 태그가 있는데 대표적으로 router-view와 router-link이다.

 

router-view

router 폴더에 있는 index.js에서 router 설정을 했던 경로들로 진입을 하면 설정해 놓은 컴포넌트를 보여주는데 저 router-view를 통해서

 

보여준다.

 

router-link

버튼 클릭 이벤트로 버튼을 클릭 했을때 버튼에 router-link를 걸어 놓으면 해당 경로로 진입하게 되며 설정한 component를 보여주게 된다.

 

이제 프로젝트를 실행해보면 Home.vue를 수정한대로 나오게 된다.