웹서비스에서 사이트맵을 제작할 경우 사용자가 클릭하여 바로 특정 페이지로 이동할 수 있도록 하는 네비게이션이 필요하다. 이번에는 2.1 라우트 설정하기 1편 포스트에 이어 SPA에서 네비게이션을 설정하는 방법에 대해 알아보자.


네비게이션 만들기

먼저 내비게이션을 사용할 수 있도록 App.vue 파일에 등록해준다.

<!-- App.vue -->

<template>
  <div id="app">
    <navigation></navigation>
    <app-nav></app-nav>  <!--네비게이션의 템플릿(nav)가 들어온다.-->
    <router-view></router-view>
  </div>
</template>
// App.vue

<script>
import navigation from './components/navigation'
export default {
  name: 'app',
  components: {
    appNav: navigation
  }
}
</script>

기존 html에서는 li태그, a태그를 사용해서 태그 내의 텍스트에 경로를 할당해주었다.

<!-- 예시 -->

<li><a href="/login">로그인</a></li>


위의 기존 방식은 서버와의 통신을 통해 페이지를 렌더해주므로 SPA의 조건을 충족하지 않는다. 따라서 아래와 같이 router-link를 사용하여 지정해준 URI로 이동하게끔 경로를 설정해준다. 그러면 위에서 등록해준 대로 App.vue<app-nav> 태그 안에 아래의 li 요소가 렌더된다.

<nav class='gnb'>
  <ul class="menu-bar">
    <li><router-link to="/login">로그인</router-link></li>
    <li><router-link to="/signup">회원가입</router-link></li>
  </ul>
</nav>

위와 같이 지정해줄 경우, 페이지에서 이동하지 않고 원하는 경로의 템플릿을 렌더해줄 수 있다.


router-link는 라우터를 지원하는 앱을 사용할 때 컴포넌트들의 네비게이션을 설정할 수 있게 해주는 컴포넌트이다. 해당 컴포넌트는 다음과 같이 쓰인다.

<router-link to="경로(uri)" tag="원하는 태그. 기본은 a태그" active-class="활성화시 현재페이지 여부를 나타내줌">문자열</router-link>

<!-- 예시 : to는 필수로 지정해야 한다.-->
<router-link to="/login">로그인</router-link>

<!-- 위는 다음과 같이 렌더링 된다. -->
<a href="/login">로그인</a>

<!-- tag 값을 주면 해당 태그로 렌더링된다. -->
<router-link to="/login" tag="li">로그인</router-link>

<!-- 위는 다음과 같이 렌더링 된다. -->
<li><a href="/login">로그인</a></li>

라우터 링크 더 알아보기


브라우저에서 현재 렌더된 페이지가 어떤 것인지 class에 동적으로 스타일을 표시하고싶은 경우에는 router-link의 옵션인 active-class 속성을 모든 li 요소에 지정한 후 해당 선택자에 css 속성을 주면 된다.

<!-- 다음 링크는 `/` 에서만 active 된다. -->
<router-link to="/" exact></router-link>

exact는 동일한 경로에 해당하는 uri에 대해 동일한 클래스를 적용해준다. li 요소 중 가장 상단의 태그에만 exact를 지정해주면 된다.

<template>
  <router-link to="/login" tag="li" active-class="current-page" exact><a href>로그인</a></router-link>
  <router-link to="/signup" tag="li" active-class="current-page"><a href>회원가입</a></router-link>
</template>

이 때 router-link 컴포넌트가 uri를 연결해주므로 a태그의 href는 지정해 줄 필요가 없다.



Julia Hwang

디발자를 꿈꾸는 웹개발자의 블로그입니다.