[Vue.js] router-link 태그의 활성화 여부 클래스

 

 

현재 url이 <router-link> 태그의 to 속성에 바인딩된 url과 동일하면 "router-link-active" 클래스가 자동으로 부여된다.

모든 url이 동일하다면 "router-link-exact-active"가 부여된다.

 

예를 들어 path가 /foo/bar 일 때,

• <router-link to="/foo">: router-link-active 적용
• <router-link to="/foo/bar">: router-link-active, router-link-exact-active 적용

 

이 클래스 이름을 변경하고 싶다면 따로 설정할 수도 있다.

const router = new VueRouter({
  routes,
  linkActiveClass: "active",
  linkExactActiveClass: "exact-active",
})

 

 

---

 

 

출처 및 참고

Interface: RouterOptions | Vue Router

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.