Vue CLI의 active-class를 사용하여 CSS 적용

하고 싶은 일

현재 표시하고 있는 페이지의 아이콘만 색을 바꾼다.
Vuetify를 사용합니다.

방법

active-class 속성을 붙여 CSS를 적용한다.

<router-link active-class="link-active" :to="{name:'Fav'}"> //ハート
 <v-btn icon>
  <v-icon>mdi-heart</v-icon>
 </v-btn>
</router-link>

<router-link active-class="link-active" :to="{name: 'Search'}"> //検索 
 <v-btn icon>
  <v-icon>mdi-magnify</v-icon>
 </v-btn>
</router-link>

<style scoped>
a{
  text-decoration: none;
}
.link-active .v-btn--icon .v-icon{
  color: rgb(202, 96, 114);
}
</style>

.v-btn--icon .v-icon 를 붙이는 것을 잊지 않는다.

문제점

선택되지 않은 링크에도 CSS가 적용됩니다.

검색 페이지에서 하트 아이콘을 적용하지 않지만
URL이 일치하면 그 이후는 모두 active가 되어 버리기 때문에, 하트와 검색의 페이지의 아이콘에 color가 적용되어 버린다.

해결책

exact 추가

active-class 속성에 exact 를 추가해 URL이 정확하게 일치할 때가 아니면 active가 되지 않는다.

최종 코드

<router-link active-class="link-active" exact  :to="{name:'Fav'}">
 <v-btn icon>
  <v-icon>mdi-heart</v-icon>
 </v-btn>
</router-link>

<router-link active-class="link-active" exact  :to="{name: 'Search'}">
 <v-btn icon>
  <v-icon>mdi-magnify</v-icon>
 </v-btn>
</router-link>

<style scoped>
a{
  text-decoration: none;
}
.link-active .v-btn--icon .v-icon{
  color: rgb(202, 96, 114);
}
</style>

Reference

이 문제에 관하여(Vue CLI의 active-class를 사용하여 CSS 적용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/shon-011/items/57fb1c0d683b3a8d94f9

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다