Vue.js verwendet Übergangsanimationen, um Routensprunganimationen zu erstellen

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen für die Verwendung von Übergangsanimationen in Vue.js zum Erstellen von Routen vorstellen. Vue.js verwendet Übergangsanimationen zum Erstellen von Routensprunganimationen Was sind das? Hier sind tatsächliche Fälle.

Keep-Live: Die umgeschaltete

Ansicht wird Cache. Wenn Keep-Live nicht hinzugefügt wird, wird es jedes Mal neu angefordert, was mehr Ressourcen verbraucht

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

Hinweis:

Wenn wir die Navigation wechseln, wird der Klasse des aktuellen Link-Tags class="router-link-active" zugewiesen, was eine sehr nützliche Operation ist.

Active-class="active" zum Router-Link hinzufügen, um den Stil zu ändern

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

Keep-Alive-Attribut der Router-Ansicht, um sicherzustellen, dass die Ansicht nur einmal gerendert und zurückgeschaltet wird und weiter. Nicht wiederholt rendern

Glauben Sie, nachdem Sie den Fall in diesem Artikel gelesen haben, dass Sie die Methode beherrschen. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Andere Vorgänge des Vue.js-Routings

Verschachteltes Routing (Sub-Routing) von Vue. js)

Benutzerdefinierte Direktive von Vue.js

Das obige ist der detaillierte Inhalt vonVue.js verwendet Übergangsanimationen, um Routensprunganimationen zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!