Vue.js는 전환 애니메이션을 사용하여 경로 점프 애니메이션을 만듭니다.

이번에는 Vue.js에서 전환 애니메이션 을 사용하여 라우팅 점프 애니메이션을 만드는 방법을 알려 드리겠습니다. Vue.js에서 전환 애니메이션을 사용하여 라우팅 점프 애니메이션을 만들 때 주의 사항 은 무엇입니까? 사례를 한번 살펴보겠습니다.

keep-live: 전환된 view는 cache가 됩니다. keep-live가 추가되지 않으면 매번 다시 요청되므로 더 많은 리소스가 소모됩니다

<transition name="fade">
   <keep-alive>
      <router-view></router-view>
   </keep-alive></transition>

참고:

탐색을 전환하면 현재 링크 태그의 클래스에는 class="router-link-active"가 할당되는데 이는 매우 유용한 작업입니다.

스타일을 수정하려면 router-link에 active-class="active"를 추가하세요

<ul>
    <router-link v-for="item in products" :to="{ path: item.path }" tag="li" active-class="active">
     {{ item.name }}    </router-link></ul>css部分
选种和hover时,显示蓝色
.product-board li.active,
.product-board li:hover {
  background: #4fc08d;
  color: #fff;
}
......

router-view의 -alive 속성은 뷰가 한 번만 렌더링되고 앞뒤로 전환할 때 반복적으로 렌더링되지 않도록 보장합니다

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

Vue.js 라우팅의 기타 작업

Vue.js의 중첩 라우팅(하위 라우팅)

Vue.js의 사용자 정의 지시어 지시어

위 내용은 Vue.js는 전환 애니메이션을 사용하여 경로 점프 애니메이션을 만듭니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!