VueJs exact-active 클래스

VueJs exact-active 클래스

Router-link를 사용하는 메뉴가 있는데, Router-link가 활성화되었을 때 클래스 "Active"를 "li"로 설정하려고 합니다.

<ul class="nav nav-second-level">
    <li v-for="item in menu">
        <router-link :to="{ name: somewhere }" tag="a" exact-active-class="IS-ACTIVATED">
            {{Name}}
        </router-link>
    </li>
</ul>

"exact-active-class"를 사용하여 클래스를 부모로 설정하는 방법이 있습니까?

감사합니다!

사용할 수 있습니다.v-if루트를 체크하고 클래스를 추가합니다.$route.name는somewhere

<ul class="nav nav-second-level">
     <li v-for="item in menu" :class="{ 'IS-ACTIVATED': $route.name === somewhere }">
         <router-link :to="{ name: somewhere }">
             {{Name}}
         </router-link>
     </li>
 </ul>

이를 위한 한 가지 방법은 다음과 같습니다.

<ul class="nav nav-second-level">
  <router-link :to="{ name: somewhere }" tag="li" exact-active-class="IS-ACTIVATED">
            {{Name}}
  </router-link>
</ul>

그렇지 않으면 부모에게 설정할 수 없습니다.대신 CSS를 적용할 것을 권장합니다.또한 라우터 링크에 태그를 지정할 필요가 없습니다.기본값은 "a"입니다.

언급URL : https://stackoverflow.com/questions/46365938/vuejs-exact-active-class