[Vue] 라우터(Router)

✏️ 라우터를 사용하기 전, Vue.js에 대해서 알아보자.

 

Vue.js는 SPA(Single Page Application) 개발을 위한 프레임워크이다.

SPA, 즉 Single Page Application이란 단일 페이지 애플리케이션으로 페이지 하나에서 동작하는 애플리케이션을 의미합니다.

가장 처음 웹 사이트를 접속했을 때, 웹 사이트 전체에 필요한 자원들을 모두 서버로부터 가져와 로딩하여 페이지를 나타냅니다.

그 후 페이지의 변경이 있을 경우 페이지 전체가 변경되는 것이 아닌 필요한 부분만 바뀌게 되는 것입니다.

 

SPA에서는 CSR(Client Side Rendering), 즉 클라이언트 사이드 렌더링을 통해 클라이언트인 브라우저가 렌더링을 처리하는 방식으로 동작합니다.

 

CSR과 반대되는 MPA(Multiple Page Application)에서 사용되는 SSR(Server Side Rendering)은 클라이언트인 브라우저가 서버에 매번 데이터를 요청하여 서버에서 처리하여 새로운 화면을 만드는 방식입니다.

 

결론적으로 대부분의 SPA의 경우 공식적으로 지원하는 Router 라이브러리가 있기 때문에 Vue.js도 Vue Router를 사용합니다.

Router는 주소에 따라 보여지는 화면이 달라지는 것을 의미합니다.

 

참고로, 간단한 라우팅 기능만 필요하고 전체 기능이 필요하지 않은 경우 브라우저의 해시 변경 이벤트를 사용하거나 History API를 사용하여 라우터의 기능을 사용할 수 있습니다.

[공식 문서 참고 링크 : https://vuejs.org/guide/scaling-up/routing.html#simple-routing-from-scratch]

Routing | Vue.js

 

우리는 모든 라우팅 기능을 사용하기 위해 만들어진 Vue Router 라이브러리를 설치하여 사용하도록 합시다.

 

npm install --save vue-router@3

Vue 2에서는 vue-router@3버전을 사용해야 합니다.

4버전은 Vue 3에서부터 사용 가능합니다.

 

✏️ Vue 2에서 사용하는 예시입니다.

 

📄 우선 main.js에 라우터를 등록합니다.

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

Vue.config.productionTip = false;

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

 

 

📄 등록 후, src 폴더 안에 router 폴더를 생성한 뒤 index.js 파일을 생성합니다.

// src/router/index.js

import Vue from "vue";
import VueRouter from "vue-router";

import Home from "../views/HomeTap.vue";
import Country from "../views/SelectCountry.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "home",
    component: Home,
  },
  {
    path: "/country",
    name: "country",
    component: Country,
  },
];

const router = new VueRouter({
  mode: "history",
  routes,
});

export default router;

 

Country라는 이름으로 views 폴더 안에 있는 SelectCountry.vue 파일을 import하여 index.js에서 사용할 수 있도록 한 뒤

routes라는 변수 안에 path, name, component를 입력하여 사용합니다.

 

• path는 렌더링이 될 URL 주소
• name은 라우트의 이름
• component는 해당 URL에 나타날 component

 

 

📄 그리고 사용할 컴포넌트에 라우터 링크와 라우터 뷰를 추가합니다.

 

App.vue에서 사용하는 예시입니다.

<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/country">country</router-link>

    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
};
</script>

<style></style>

라우터 링크라는 태그를 사용하고 구체적인 속성으로 "to" prop를 사용하여 이동할 주소를 나타냅니다.

기본적으로 <router-link>는 렌더링 과정에서 <a> 태그로 렌더링되어 화면에 나타납니다.

 

라우터 링크에 따라 <router-view>에는 라우트에 매칭되는 컴포넌트가 나타납니다.

 

 

 

추가적으로 main.js에서 라우터를 등록했기 때문에 this.$router 메서드와 현재 라우트를 this.$route로 접근할 수 있습니다.

 

또, <router-link>는 현재 라우트와 일치할 때 자동으로 .router-link-active라는 클래스가 추가됩니다.

이는 네비게이션 바를 만들 때 CSS를 사용하여 꾸미기에 적합한 옵션입니다.

 

[참고]

https://v3.router.vuejs.org/kr/guide/#html

시작하기 | Vue Router