vue router-link-exact-active, router-link-active 차이

vue에서는 정말 편한 기능이 많은데 그 중 하나인 router-link-active를 기록하고자 한다. router-link-active는 vue에서 지원하는 css 기능이다. 보통 사이트의 상단에는 대메뉴가 존재하는데, 해당 메뉴에는 다양한 효과를 넣는다. hover 효과라던가, 애니메이션 효과라던가! 이 부분을 하나, 하나 지정해서 css 효과를 주는건 항상 번거롭고 귀찮았었다. 하지만 vue에서는 이런 부분을 간편하게 지원해준다!

 

 

router-link는 사이트의 상단 대메뉴에서도 많이 사용하는데 보통 대메뉴에는 hover되었을때 애니매이션 효과가 생기고, 선택된 메뉴에선 그 효과가 고정되는 경우가 많다. 페이지를 바꾸면서 해당 효과를 유지하는 css 코드는 작성하기 어렵다... 

 

 

---

 

 

  Router - Link - Active  

 

사실 해당 기능은 vue를 접한지 얼마 안된 분들은 잘 모르는 기능이 아닐까 싶다. 이 부분에 대한 설명은 몰론 vue 공식사이트에 존재하고 있지만, 그렇게 눈에 띄게 분류해놓은것도 아니고, 많은 설명글들 사이에 엄청 작게 파묻혀있기때문에 알아보기가 쉽진 않다. 공식문서에 써져있는 내용을 먼저 확인해보자.

 

 

링크가 활성화된 상태에서 사용할 수 있는 기능으로, 전역적으로 사용이 가능하다. 이 기능을 실제로 적용하는 방법은 따로 설명이 되어 있지 않지만, 사용법은 어렵지 않다. 나는 기본적으로 SCSS 를 사용하기 때문에 <style lang="scss"> 을 작성하였지만, 그냥 CSS여도 방법은 똑같다. 

 

<template>
  <div class="app">
    <ul>
      <li>테스트메뉴1</li>
      <li>테스트메뉴2</li>
      <li>테스트메뉴3</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
        //data here
    }
  }
} 
</script>

<style lang="scss">
.router-link-active {
  border-bottom: 3px solid #f30765;

  li{
    color: #f30765;
  }
}
</style>

 

이 기능으로 정말 간단하게 CSS 적용이 가능하다! 그러나 해당 기능에 치명적인 단점이 있다. 바로 동일한 라우터를 가지고 있는 모든 요소에 중복적용이 되는 것. 메뉴를 짜다보면 router의 기능인 children을 많이 사용하게 되는데 이때, 최상단 부모와 동일한 path가 적용된 children이 있다면 그 페이지에 동일한 CSS가 중첩되서 적용되는 것이다. 그렇다면 router-link-active도 결국 한계가 있는 기능이 아닐까? 라는 의문도 생긴다.

 

 

---

 

  Router - Link - Exact - Active  

 

하지만 우리가 사용하는 vue는 우리의 생각보다 정말 좋은 프레임워크고, 많은 기능을 지원해준다. vue의 버전이 2.5이상으로 올라가면서 해당 기능에 대한 문제가 보완되서 나왔는데 그게 바로 router-link-exact-active다. 

 

 

사실 위 기능인 router-link-active과 명칭이 크게 다르지 않고, 설명이 너무 짧기 때문에 두 기능의 차이점을 인지하기는 어렵긴하다. 둘의 가장 큰 차이점은, 얼마나 정확하냐 이다. 자바스크립트의 연산자를 비유하면 조금 더 이해가 쉽다.

 

자바스크립트에서 같다라는 뜻을 가진 연산자는 ==와 ===가 있다. 둘의 차이점은 굉장히 중요한 내용이라, 이 글을 읽는 대부분의 사람들이 인지하고 있다 생각한다. ==는 입력내용만 같다면 같다고 인지한다. 하지만 ===는 조금 더 정확한 같다 로, 속성까지 모두 동일해야 같다고 인지한다. vue의 router-link-active과 router-link-exact-active도 동일하다.

 

router-link-active 는 동일한 path를 포함하고 있다면 모두 같다 라고 인식한다. 

{
   path: "test",
   component: test,
 },
{
   path: "test/component1",
   component: component1,
},

예를 들어 위와 같은 링크로 router를 작성한다면 router-link-active는 두 페이지 모두에게 CSS 효과를 적용한다. 하지만 router-link-exact-active는 두 페이지를 다른 페이지라고 인식한다. test라는 문구가 포함되어 있긴하지만 path에 있는 내용이 모두 동일하지 않기 때문이다. 불편한점을 바로 개선해서 버전업을 해주는 vue가 너무 이쁘다...ㅜㅜ