오늘은 SPA(Single Page Application)의 시작이 되는 vue-router에 대해서 간단하게 알아보겠습니다. SPA라 함은 싱글 페이지 어플리케이션을 이르는 말로, 전체 vue.js로 개발된 화면들이 하나의 페이지로 동작을 하게됩니다. 따라서 화면의 이동을 위해서는 전체 URL을 사용해서 진행하는 것이 아닌... router를 통해서 해당 화면으로 이동하는 방식을 사용하게 됩니다.
이런 router 기능을 제공하는 것이 vue에서는 vue-router 플러그인 입니다. 그럼 vue-cli를 통해서 자동으로 생성한 프로젝트를 뜯어보면서 vue-router 동작 구조를 살펴보겠습니다. 왜냐하면, 자동으로 기본구성이 되어있기 때문입니다.
1. 라우터 객체생성
우선 최초로 시작되는 vue instance객체 생성부분에 router객체를 추가하여 생성을 해 줍니다. 그렇게 되면 생성되는 instance에는 router내 index.js의 로직이 적용이 되게 됩니다.
[main.js]
import Vue from 'vue';
import App from './App';
import router from './router';
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
});
2. 라우터 객체설정
라우터에 대한 객체 설정은 프로젝트 root내 src > router > index.js에 적용이 됩니다. 역시나 기본적으로 프로젝트를 만들때 자동으로 설정이 되어 들어갑니다. 초기에 사용하는데는 더할나위없이 편합니다. 그럼 구조를 살펴보겠습니다.
[index.js]
import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
},
],
});vue-router는 플러그인 이기 때문에, import를 수행하고... Vue.use를 통해서 등록을 하게 됩니다. 그리고 세부적인 라우팅 정보에 대해서는 위와 같이 입력해 주면 됩니다.
위의 기본적인 설정은 기본 구동되는 서버의 root주소인... http://localhost:8080/ 으로 접근할 경우... HelloWorld라는 페이지로 라우팅 하라는 내용입니다. vue-router를 통해 라우팅되는 페이지는 위의 내용처럼 import를 통해 지정을 하게 됩니다.
import HelloWorld from '@/components/HelloWorld';
이렇게 해당 경로로 접속을 할 경우, 최초에 로딩된 페이지에 components 폴더안에 있는 HelloWorld.vue 페이지가 렌더링해서 보여지게 됩니다. 원하는 경로를 추가할때는 위와 똑같이 *.vue를 import하고 path와 components정보를 입력하면 수행이 되게 됩니다.
3. 라우팅 결과
[HelloWorld.vue]
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
......
축약
......
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
msg: 'Welcome to Your Vue.js App',
};
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>SPA를 위한 vue 페이지 프로그래밍 구조는 나중에 알아보겠습니다. 해당 vue에 대한 결과로 아래의 결과가 나오게 되는 것 입니다.
잘 표출되서 들어오네요~~~
4. router-view
이제는... 과연 SPA구조에서 vue-router가 어떻게 동작하는지 좀 더 알아보겠습니다. 실질적으로 아래와 같이 App.vue가 실행이 되면... 나머지 화면은 이 안에서 렌더링이 됩니다.
[App.vue]
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
};
</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>
그래서 Vue.js의 공식적인 img가 먼저표시가 되고, 나머지 vue-router에 대한 components는 <router-view/>에 렌더링이 되게 됩니다.
5. router-link
일반적으로 vue-router에 등록한 path는 vue 페이지 내에서 링크를 걸때 <a/> 보다는... <router-link>를 사용해야 합니다. 간단하게... <a/>를 사용하면 페이지를 새로 갱신하는데, <router-link>는 갱신없이 화면을 이동할 수 있습니다. 이런 부분은 나중에 자세히 알아보게 되겠죠~~
- Ayotera Lab -
댓글