Vue.js utilise l'animation de transition pour créer une animation de saut d'itinéraire

Cette fois, je vais vous apporter les précautions d'utilisation de l'animation de transition dans Vue.js pour créer une animation de saut d'itinéraire Vue.js utilise l'animation de transition pour créer une animation de saut d'itinéraire <.>Qu'est-ce que c'est ? Voici des cas concrets. keep-live : La

commutée sera mise en cache Si keep-live n'est pas ajouté, elle sera à nouveau demandée à chaque fois, ce qui consomme plus de ressources.

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

Lorsque nous changeons de navigation, la classe de la balise de lien actuelle se verra attribuer class="router-link-active", ce qui est une opération très utile .

Ajoutez active-class="active" à router-link pour modifier le style

<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;
}
......

Croyez Après avoir lu le cas dans cet article, vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!