[Vue] 라우터(Router)

 

Vue js의 페이지 이동을 위한 라이브러리 : 페이지 이동할 때 url 변경되면, 변경된 요소의 영역에 컴포넌트를 갱신

- SPA의 특징 (단일 페이지 어플리케이션, Single Page Application)

 : 브라우저에 단 한번, 페이지 전체 로드. 이후에는 특정 부분만 Ajax를 통해 데이터 바인딩

- DOM을 새로 갱신하는 것은 아니다.

---

router/index.js

라우터를 설정할 js 파일

- export default 처리하여 밖으로 내보내면서, router로 선언한다.

- mode 속성을 이용하여 history 처리를 하면 url에 #이 제거 되어진다.

- path는 대상 경로, name은 라우터에 이름을 부여(아래 예시에는 없음). component는 router-view 영역에 보여줄 컴포넌트를 지정

import Vue from 'vue';
import VueRouter from 'vue-router';
import Help from '../views/help.vue';

Vue.use(VueRouter); //필수

export default new VueRouter({
  mode:'history', //#제거 위함
  routes: [{
         path: '/', 
         redirect: '/home' 
         }, 
         {
         path: '/home',
         component: () => import('../views/Main.vue'),
         }, 
         {
         path: '/help',
         component: Help
   }]
});

---

App.vue

라우터가 표시될 영역- router-view 부분에 js파일에서 지정한 component가 표시되어진다.- <router-link>는 url을 통해 페이지 이동을 위함. <a>태그와 비슷하다.- 실제 바인딩되는 영역은 <router-view>

<template>
	<div id="app">
    	<!--router link는 a태그로 변환되며, url에 /main을 치면 해당 경로로 페이지 이동-->
        <router-link to="/main">main</router-link>
        <router-link to="/help">help</router-link>
        <!-- convert -->
        <!-- <a href="#/main" class="">main</a> -->
        <!--router-view는 link로 페이지 이동 후, 그 범위 내에서 데이터가 바인딩되는 영역-->
        <router-view></router-view>	
	</div>
</template>

---

main.js

위에서 만든 router를 main.js에 추가

- index.js를 router라는 이름으로 import

- router를 추가. (6번째 라인 참고)

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

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