클릭으로 주소 이동하기 (RouterLink)

지난 글에서 잠시 RouterLink에 대한 언급을 했었습니다. 이번 글에서는 이 RouterLink를 어떻게 사용하는 지 잠시 알아보겠습니다.

RouterLink

RouterLink는 Vue Router 라이브러리에서 제공하는 컴포넌트입니다. a 태그와 유사하지만 이전에 언급했듯이 서버에 요청하지 않고 클라이언트 자체적으로 주소를 이동하고 페이지를 전환합니다. a태그에서 href 속성을 통해 이동할 주소를 넣었다면, RouterLink는 to 속성을 이용합니다.

      <template>
	<RouterLink to="/html">HTML</RouterLink>
</template>

<script setup>
import { RouterLink } from "vue-router"
</script>
    

브라우저에서는 다음과 같이 렌더링 됩니다.

우리가 이전에 a 태그를 클릭했을 때 이동을 방지하도록 prevent 수식어를 넣었었습니다. 이 컴포넌트도 마찬가지로 동일하게 prevent 기능이 들어가 있기 때문에 클릭해도 페이지 이동을 하지 않습니다.

MenuBar에 추가하기

기존 MenuBar를 수정해보겠습니다.

      <template>
  <nav class="menu">
    <RouterLink class="category" to="html">HTML</RouterLink>
    <RouterLink class="category" to="css">CSS</RouterLink>
    <RouterLink class="category" to="javascript">Javascript</RouterLink>
  </nav>
</template>
    

위의 방법 대신에, v-for 디렉티브를 사용할 수도 있습니다.

      <template>
  <nav class="menu">
    <RouterLink
      v-for="c of categories"
      :key="c"
      :to="'/' + c.toLowerCase()"
      class="category"
    >
      {{ c }}
    </RouterLink>
  </nav>
</template>
    

클릭해보면 주소가 /html, /css, /javascript 로 바뀌는 걸 보실 수 있습니다.

하지만 아래 글 목록은 바뀌지 않는데요. 기존의 클릭이벤트 처리 내용인 @click.prevent="$emit('click-category', c)"이 빠졌기 때문입니다. 이걸 넣으면 동일하게 동작하겠지만, Vue Router를 이용해서 더 간편하게 구현해보려 합니다.

다음 글에서 자세히 다뤄보겠습니다.