[Udemy Vue 완벽가이드 Section13] 171. 활성 링크 스타일링하기

router-link에 의해 추가된 특수 css클래스를 a태그에 사용해보자.

 

TheNaveigation파일로 가서, hover와 active규칙에 새 선택자를 추가해준다.

router-link-active 클래스가 있는 a태그.

이 스타일을 해당 css클래스를 갖는 모든 a태그에 적용해야한다고 알린다.

a:hover,
a:active,
a.router-link-active { /*router-link-active클래스가 있는 a태그*/
  color: #f1a80a;
  border-color: #f1a80a;
  background-color: #1a037e;
}

 

저장 후 확인해보면, 활성화되어있는 Users가 highlight 되어있다.

'Teams'를 누르면 Teams가 강조된다.

 

이렇게 현재 활성화된 링크가 어떤 링크인지 시각적으로 표시할 수 있다.

참고로, 여기 클래스가 두개 있다.

스타일링에 사용한 router-link-active와 router-link-exact-active가 있다.

둘의 차이점을 보자.

 

 

# router-link-active  vs  router-link-exact-active

'teams/teamsid' 이렇게 중첩되는 라우트가 있을 수도 있다.

 

router-link-exact-active : 현재 경로와 완벽하게 일치하는 내비게이션 항목에만 적용되고 

router-link-active : 현재 활성화된 라우트의 일부만 포함하는 내비게이션 항목에도 적용된다는 차이점이 있다.

지금은 중첩 라우트가 없지만, 나중엔 뭐가 다른지 볼 수 있다.

 

지금 시점에선 애플리케이션 스타일링에 이런 클래스들이 도움이 된다는 정보만 알아두자.

 

# class명 변경

마음에 들지 않는다면 기본 클래스를 변경할 수도 있다.

라우터를 생성한 main.js를 보면 구성옵션이 더 많이 있다.

linkActiveClass와 linkExactActiveClass가 있는데

기본값인 router-link-active 클래스 대신, 그냥 'active'라고 해보자. 여기에 덮어쓰면 된다.

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/teams', component: TeamsList },
    { path: '/users', component: UsersList },
  ],
  linkActiveClass: 'active'
});

 

한번 확인해보자.

a태그로 'router-link-active'클래스 대신, active클래스를 선택해준다.

여기 있는 스타일링도 변경해줘야한다.

a:hover,
a:active,
a.active {
  color: #f1a80a;
  border-color: #f1a80a;
  background-color: #1a037e;
}

 

확인해보면 똑같이 작동하고 있다.

router-link-active 클래스 대신, 'active'클래스가 추가되어있는걸 볼 수 있다.

 

이런 식으로도 구성할 수 있다.

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.