router-link와 router-view

Vue.js에도 라우터 기능이 존재합니다. 라우터 기능을 담당하는 컴포넌트는 바로 router-link와 router-view입니다.

이 둘은 Vue.js에서 라우터를 사용하여, SPA(Single Page Application)를 구현할 때 사용해요.

※ SPA(Single Page Application) : 한 페이지 내에서 URL과 데이터만 변경하며, 화면을 동적으로 갱신하는 웹 애플리케이션

 

하지만, 이 컴포넌트들을 사용하려면, Vue Router를 설치해야 합니다.(저는 npm을 사용했어요.)

npm install vue-router

 

바로 자세히 알아봅시다.

 

---

1. router-link

router-link는 Vue Router와 함께 동작하여, 페이지간의 탐색을 쉽게 만들어 줘요.

이는 <a>태그 같이 사용자가 클릭할 수 있는 링크를 생성하고, 이를 통해 SPA 내에서 다른 컴포넌트로의 전환을 관리할 수 있습니다.

 

기본 사용 방법으로는 다음과 같아요.

1-1. to

router-link는 to 속성으로 이동할 경로를 지정하는 필수 속성입니다. 문자열 or 객체 형태로 경로를 설정할 수 있어요.

이 방법을 가장 많이 사용합니다.

<router-link :to="{ name: 'home' }">Home</router-link>

 

1-2. tag

router-link는 기본적으로 <a> 태그로 렌더링되지만, tag 속성을 이용해서 다른 HTML 태그로 변경할 수 있어요.

<router-link tag="div" to"/about">About</router-link>

 

1-3. replace

replace를 true로 설정하면 링크 클릭 시, 브라우저의 히스토리에 기록을 남기지 않습니다.

<router-link to="myPage" replace="true">My Page</router-link>

 

1-4. active-class

active-class는 현재 경로와 일치하는 경우, 적용할 CSS 클래스 이름을 지정해요.

<router-link to"/blog" active-class="active">Blog</router-link>

 

1-5. exact

exact는 경로가 정확히 일치할 때만, 특정 CSS를 적용할 수 있어요.

<router-link to="Contact" exact-active-class="exact-active">Contact</router-link>

 

---

2. router-view

router-view는 router-link로 이동한 경로에 따라 해당 경로에 매핑된 컴포넌트를 표시하는 영역입니다.

Vue 라우터가 특정 경로에 대해 지정된 컴포넌트를 렌더링하는 장소 역할을 하는 것이죠.

보통 App.vue와 같은 상위 컴포넌트에 추가하여, 페이지 or 섹션 단위로 다른 컴포넌트를 표시할 수 있게 해요.

 

사용 방법은 다음과 같습니다.

<template>
  <div>
    <router-link to="/home">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

위 코드에서 router-link를 통해 경로가 변경되면, router-view가 해당 경로에 매핑된 컴포넌트로 교체됩니다. 이 구조 덕분에 SPA의 페이지 전환이 부드럽고 빠르게 이루어집니다.

 

라우트가 중첩될 경우, 여러 개의 router-view를 사용할 수 있으며, 특정 위치에 맞는 컴포넌트가 렌더링됩니다.

<template>
  <div>
    <router-view></router-view> <!-- 상위 컴포넌트 -->
    <router-view name="sidebar"></router-view> <!-- 명명된 View -->
  </div>
</template>

 

---

3. 정리하며

지금까지 router-link와 router-view에 대해 알아보았습니다.

이 둘을 사용하면, URL에 따라 원하는 컴포넌트를 동적으로 렌더링하여, 웹 페이지처럼 보이는 SPA를 쉽게 구현할 수 있을 거에요.

 

참고

vue 공식 홈페이지의 <router-link>

Minwook-Shin 님의 Vue.js의 Router view에 대하여 알아보기

devraphy 님의 32. Vue - Router Link