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

vue

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.

Remarque :

<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

attribut keep-alive de router-view pour garantir que la vue n'est rendue qu'une seule fois et rétablie et ainsi de suite. Ne effectuez pas de rendus répétés

<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 :

Autres opérations de routage Vue.js

Routage imbriqué (sous-routage) de Vue. js)

Directive personnalisée de Vue.js

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!