VueRouter의 Active Links 파헤치기

황성 링크

활성 링크란 현재 활성화된 링크를 지칭하는 뜻입니다.
RouterLink 컴포넌트는 활성 링크에 router-link-active 및 router-link-exact-active 두가지 CSS 클래스를 추가합니다.

따라서, 활성된 링크에 맞게 특정 CSS를 활성화 시킬 수 있는 것이죠.

 

그럼 활성화된 링크란 무엇일까요??

 

예를 들어보겠습니다.
아래와 같이 route와 RouterLink가 작성되어 있는 상황입니다.

const routes = [
    {
        path: '/uesrs/:username',
        component: User,
        children: [
            {
                path: 'grade/:number'
                component: () => import('@/components/UserGrade.vue'),
            },
        ],
    },
]

<RouterLink to="/users/james">
    User
</RouterLink>
<RouterLink to="/users/james/grade/3">
    Grade
</RouterLink>

 

현재 우리가 위치한 URL 이 /users/james/grade/3이라고 가정해 봅시다.
route에서 부모와 자식이 모두 활성 상태로 간주되게 됩니다.
활성 상태로 간주가 된다면 router-link-active class가 적용됩니다.

 

하지만, URL이 모두 일치한 두번째 링크만 정확한 exact!! 상태로 간주가 되는데요.
exact란 정확한이란 뜻을 가지고 있죠?!

 

맞습니다!!

 

URL이 현재와 완전히 일치한 녀석이 router-link-exact-active class가 적용되는 것이죠. 어떨 때 사용하게 될까요??

 

짐작을 해봅시다.

 

우리는 Navigation에서 현재 내가 어느 메뉴화면에 있는지 표시해주고 싶습니다.
하지만, 우리는 메뉴이전에 카테고리들이 있죠? 만약 modal형식을 사용해 숨김처리를 한 카테고리의 전체 메뉴를 보고 싶을 경우 router-link-active class에 선언하여 표시하고 router-link-exact-active class에 밑줄을 긋거나 하이라이트를 주어서 현재 메뉴위치를 표시해 줄 수 있을 겁니다.

 

이해가 되셨나요??? 한가지 예이니 다양하게 활용할 수 있을겁니다.

RouterLink의 활성 상태 확인

활성 상태의 고려사항에서 query와 같은 다른 route 속성은 고려하지 않습니다.
경로가 완벽하게 일치할 필요는 없습니다. 예를 들어 alias를 사용하는 경우 동일한 route기록 및 params로 해결되는 한 여전히 일치로 간주합니다.

 

또한, route에 redirect가 있으면 링크가 활성 상태인지 확인할 때 따르지 않습니다.

 

조건

• 현재 위치와 동일한 라우트 기록(즉, 구성된 라우트)과의 일치
• 현재 위치와 동일한 params 값을 가짐

Nested Route의 경우 관련 params가 일치하면 조상 route로의 모든 링크도 활성 상태로 간주합니다.

Class Configuration

RouterLink 컴포넌트에는 적용되는 class의 이름을 변경하는데 사용 할 수 있는 속성이 두가지가 있습니다.

<RouterLink
    to="..."
    activeClass="border-indigo-500"
    exactActiveClass="border-indogo-700"
    ...
>
....
</RouterLink>

 

createRouter()에 linkActiveClass 및 linkExactActiveClass 옵션을 활용하여 전역으로 설정할 수도 있습니다.

const router = createRouter({
    linkActiveClass: "border-indigo-500",
    linkExactActiveClass: "border-indogo-700",
    // ...
})