활성 링크

애플리케이션에는 RouterLink 컴포넌트 목록을 렌더링하는 내비게이션 컴포넌트가 있는 경우가 많습니다. 그 목록 안에서는 현재 활성 라우트로 향하는 링크를 다른 링크와 다르게 스타일링하고 싶을 수 있습니다.

RouterLink 컴포넌트는 활성 링크에 router-link-active와 router-link-exact-active라는 두 CSS 클래스를 추가합니다. 이 둘의 차이를 이해하려면 먼저 Vue Router가 어떤 기준으로 링크를 활성 상태라고 판단하는지 살펴봐야 합니다.

링크는 언제 활성 상태인가요?

RouterLink는 다음 조건을 만족하면 활성 상태로 간주됩니다:

1. It matches the same route record (i.e. configured route) as the current location.
2. It has the same values for the params as the current location.

중첩 라우트를 사용 중이라면, 관련 params가 일치하는 한 상위 조상 라우트로 향하는 링크도 활성 상태로 간주됩니다.

query 같은 다른 라우트 속성은 고려되지 않습니다.

경로가 반드시 완벽하게 일치할 필요는 없습니다. 예를 들어 alias를 사용하더라도 같은 라우트 레코드와 params로 resolve된다면 여전히 일치하는 것으로 간주됩니다.

라우트에 redirect가 있더라도, 링크 활성 여부를 확인할 때는 이를 따라가지 않습니다.

정확히 활성인 링크

정확한 일치는 조상 라우트를 포함하지 않습니다.

다음과 같은 라우트가 있다고 가정해 봅시다:

const routes = [
  {
    path: '/user/:username',
    component: User,
    children: [
      {
        path: 'role/:roleId',
        component: Role,
      },
    ],
  },
]

다음 두 링크를 생각해 봅시다:

<RouterLink to="/user/erina">
  User
</RouterLink>
<RouterLink to="/user/erina/role/admin">
  Role
</RouterLink>

현재 location 경로가 /user/erina/role/admin이라면 두 링크 모두 활성 상태로 간주되어 router-link-active 클래스가 두 링크 모두에 적용됩니다. 하지만 정확히 일치하는 것은 두 번째 링크뿐이므로 router-link-exact-active 클래스도 두 번째 링크에만 적용됩니다.

클래스 구성하기

RouterLink 컴포넌트에는 activeClass와 exactActiveClass라는 두 prop이 있으며, 이를 사용해 적용될 클래스 이름을 바꿀 수 있습니다:

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

기본 클래스 이름은 createRouter()에 linkActiveClass와 linkExactActiveClass 옵션을 전달하여 전역으로 바꿀 수도 있습니다:

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

v-slot API를 사용하는 더 고급 사용자 정의 기법은 RouterLink 확장하기를 참고하세요.