【Vue.js】router-link의 active-class・exact 사용법

소개

일에서 사용하게 되었기 때문에 1부터 Vue.js에 대해 배웠다.
제대로 기억하지 않으면 우선 그런 것을 비망록으로 하나하나 남겨둔다.

router-link의 active-class 및 exact 속성

router-link란?

vue-router를 사용할 때 URL에서 화면의 내용을 전환할 때 사용하는 태그로 SPA를 구축하는데 있어서 필수 기능.

router-link의 active-class 속성

active-class 속성을 사용하면, router-link의 to 속성으로 지정하고 있는 URL 패스에 합치하고 있을 때, active-class 로 정의하고 있는 class 속성을 요소에 부여할 수가 있다.
실제로, 이하의 동영상과 같이 링크가 액티브한 때(URL 패스에 합치할 때)에 class 속성이 부여되고 있는 것을 알 수 있다.

동영상의 소스 코드는 이하.

App.vue

<template>
  <div>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <!-- 省略 -->
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <router-link
                class="nav-link"
                to="/"
                active-class="link--active"
                >Home
              </router-link>
            </li>
            <li class="nav-item">
              <router-link
                class="nav-link"
                to="/users"
                active-class="link--active"
                >Users
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <main class="container-sm">
      <router-view></router-view>
    </main>
  </div>
</template>

<style scoped>
.link--active {
  font-size: 20px;
}
</style>

다만, 상기에서는 User를 선택하고 있을 때, Home도 마찬가지로 active-class에 지정하고 있는 클래스가 요소에 부여되어 버리고 있는 것을 알 수 있다.
이것은, URL 패스에 합치라고 하는 것이 그것을 포함한다고 하는 의미이며, 이번으로 말하면 /users 은 Home의 router-link인 / 를 포함하고 있으므로, Home 의 요소와 같이도 link--active 가 부여되어 버리고 있다.
이것을 완전하게 일치하고 있을 때, 즉, URL 패스가 / 의 때만, /users 의 때만, 이라고 하는 엄밀하게 판정시키려면 exact 속성을 사용한다.

exact 속성

exact 속성을 router-link 에 부여하면 다음과 같이 되어 URL 경로에 엄밀하게 (완전히) 일치하고 있을 때만 active-class 으로 정의하고 있는 클래스가 요소에 부여되도록 할 수 있다.

동영상의 소스 코드는 이하.

App.vue

<template>
  <div>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <!-- 省略 -->
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <router-link
                class="nav-link"
                to="/"
                exact
                active-class="link--active"
                >Home
              </router-link>
            </li>
            <li class="nav-item">
              <router-link
                class="nav-link"
                to="/users"
                exact
                active-class="link--active"
                >Users
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <main class="container-sm">
      <router-view></router-view>
    </main>
  </div>
</template>

<style scoped>
.link--active {
  font-size: 20px;
}
</style>

Vue.js 공부 메모 목록 기사 링크

Vue.js에 대해 공부했을 때 작성한 공부 메모 기사 링크를 집계 한 기사.

htps : // 코 m / 유타 카타 야마 - 23 / ms / 다베 fb59d16 아 83f1 아 1d4