Develop/Vue

[Vue.js/SCSS] router-link-active / router-link-exact-active

wltn.js 2023. 2. 16. 16:12
  • router-link-exact-active : router-link to에 지정한 path에 해당하는 path만 적용
  • router-link-active : router-link to에 지정한 path의 하위 path 모두 적용

 

  • 예제코드) scss
#header-nav {
  padding: 30px;
  z-index: 1;
  a {
    font-weight: normal;
    color: #2c3e50;
    text-decoration: none;

    &.router-link-active {
      color: #f17f42;
      font-weight: 600;
    }
  }
}