[Vue] 라우터 개념 및 사용방법

라우터

클라이언트의 요청 경로에 따라 해당하는 컴포넌트를 불러와 페이지를 구성할 수 있다.
URL 변경 시 DOM을 새로 갱신하는 것이 아니라 미리 컴포넌트를 가지고 있다가 변경된 요소영역만 갱신한다.(SPA 언어의 큰 특징)
따라서 유연하게 페이지 젼환이 가능하다. vue 프레임워크에서는 vue-router라는 라우팅 라이브러리를 지원한다.

설치하기

vue-router를 설치하고, package.json파일에서 모듈이 잘 추가되었는지 확인하자

npm install vue-router --save

라우터 속성

다음은 라우터 인스턴스를 생성할 때 설정하는 값이다.

String mode : 기본 값은 Hash 모드 (history 모드를 사용하면 브라우저 히스토리 스택에 기록된다.)
String redirect : 리다이렉팅 (주로 메인 페이지 등에 사용한다.)
array routes : 페이지 라우팅 정보
- String path : 페이지 경로 (url)
- Object component : 해당 url 페이지에 사용 할 Component
- Array children : 중첩 라우팅을 위한 배열

라우터 생성하기

라우터를 생성하는 방식은 인스턴스 방식, vue-router4 이후에 도입된 create 방식 두 가지가 존재한다.

인스턴스 방식으로 생성

먼저 vue-router를 임포트하여 라우터 인스턴스를 새로 생성한다.

//📁router/router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Main from '../views/Main.vue';
import Info from '../views/Info.vue';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history', //해쉬값 제거 방식
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      component: Main
    },
    {
      path: '/Info',
      component: Info
    }
  ]
});

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

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

Create 방식으로 생성

router 4버전에서는 더 이상 인스턴스를 호출하지 않고, createRouter메서드를 사용해 라우터를 생성한다. (마치 Vue 3에서의 createApp을 따라가는 느낌..?) 개인적인 생각이지만 이런 메서드 생성 방식이 인스턴스 생성 방식 보다 가독성이 더 좋다고 느껴진다.

//📁router/router.js
import { createWebHistory, createRouter } from 'vue-router';

const routes = [
  {
    /*route config*/
  }
]; //라우팅 패스, 컴포넌트 등 정의

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

//📁main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const myApp = createApp(App);
myApp.use(router);
reckeyApp.mount('#app');

렌더링

라우터를 생성한 컴포넌트에 router-view태그를 선언하면 URL에 맞게 컴포넌트들이 맵핑된다.

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

라우터 링크

사용자에게 라우팅 된 경로로 이동하게끔 앵커태그를 생성하는 속성이다. router-link속성을 통해 앵커 태그 기능을 수행하게한다.

<router-link to="/main">main</router-link>
<!-- convert -->
<a href="#/main" class="">main</a>

to속성에 동적으로 라우팅 경로를 생성시킬 수 있다. v-bind속성은 동적 경로를 생성하고 싶을 때 유용하다.

<router-link v-bind:to="`/user/${item.username}`">User-Info</router-link>
<!--./user/username -->
<router-link to="/user/">USER</router-link>
<!--./user/ -->

스타일링

scoped속성을 통해 에서 해당 컴포넌트에서만 독립하게 사용하는 스타일을 입힐 수 있는데, 라우터 링크에서 사용되는 앵커태그의 기본 값은 router-link-exact-active이며, active-class속성을 통해 따로 정의할 수도 있다.

<template>
  <router-link to="profile">
    <h1>profile</h1>
  </router-link>
</template>
<style scoped>
  .router-link-exact-active {
    color: red;
  }
</style>

동적 라우팅

url-path를 동적으로 요청받아 데이터를 넘길 수 있는 라우팅 방식이다. path끝에 :id를 붙이면 된다. (파라미터로 전달) 반대로 해당 파라미터 정보를 가져올 때는 $route 객체를 참조하면 된다. 만약 post/라는 url에 파라미터로 post id를 넘겨야한다고 생각해보자.

import AskItem from '../views/PostItem.vue';
const router = new VueRouter({
	routes: [{
		path : '/post/:id'
        component : PostItem
	}]
});

이제 사용자가 /post/123 이라는 url을 입력한다면, PostItem 컴포넌트에서는 ‘123’이라는 ID를 가진 내용을 API를 통해 요청받아야 할 것이다. this.$route.params.id를 통해 가져올 수 있다.

created() {
  getPost('requestPost', this.$route.params.id);
}

라우터