[Vue] active-class를 이용한 router-link 하이라이트

프로젝트를 진행하면서 탭을 활용할 일이 있었다.

1. 탭을 router-link로 구현하고
2. router의 children을 이용해 탭에 해당하는 내용을 보여주도록 구현했다.

클릭했을 때의 탭 하이라이트(클릭 이벤트 이용), 링크로 접속했을 때의 탭 하이라이트(create() 이용)는 구현할 수 있었다.

하지만 브라우저 뒤로 가기를 했을 때 해당 탭이 하이라이트 되도록은 구현하지 못했다.

 

이를 구현하기 위해 찾은 것이 router의 linkActiveClass이다.

 

const router = new VueRouter({
    mode: "history",
    base: process.env.BASE_URL,
    linkActiveClass: "active",
    routes,
});

라우터에 이와 같이 속성을 추가하면, 현재 링크에 해당하는 router-link에 active라는 클래스가 추가된다.

 

그러나!!

 

처음에는 이 기능을 통해서 그 동작이 되는것인 줄 알았다.

 

하지만 Vue Router 공식 문서를 보고 linkActiveClass가 단지 Vue전역적으로 원하는 이름의 active css class를 적용해주는 것 뿐, active-class와 exact-active-class로 해당 기능을 구현할 수 있음을 알았다.

 

콘솔로 찍어보니 현재 링크에 해당하는 router-link에 다음과 같이 클래스가 추가됨을 알 수 있었다.

 

<a href="/dashboard" class="router-link-exact-active router-link-active" aria-current="page">대시보드</a>

 

여기서 router-link-exact-active와 router-link-active 두 개의 클래스가 추가된 것을 알 수 있다.

 

• active-class
  • 기본값 : router-link-active(linkActiveClass로 지정 가능)
  • 적용 : 해당 링크가 활성화된 상태일 때 클래스 적용
• exact-active-class
  • 기본값 : router-link-exact-active(linkExactActiveClass로 지정 가능)
  • 적용 : 정확하게 일치하는 링크가 활성화 된 상태일 때 클래스 적용

두 방식의 차이점은, /a/b/c 라는 api가 있을 때,

• exact-active-class는 정확하게 /a/b/c와 일치해야 적용되고
• active-class는 /a, /a/b, /a/b/c에서 전부 적용된다

아래 링크에 router-link의 다양한 옵션이 정리되어 있다.

역시 항상 공식문서를 참고해야해...

API 레퍼런스 | Vue Router