javascript - Problème d'animation de routage vue

Question

<template>
    <transition :name="transitionName">
      <router-view></router-view>
    </transition>
</template>

const routes = [
  { path: '/home', component: home },
  { path: '/detail', component: detail },
  { path: '/order', component: order },
  { path: '/', component: home }
]

    watch: {
        '$route' (to, from) {
            const toDepth = to.path.split('/').length;
            const fromDepth = from.path.split('/').length;
            this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
        }
      }

Ma page entière n'a qu'une seule <router-view></router-view>. Est-il impossible de faire disparaître l'itinéraire qui est sur le point de disparaître par la gauche et l'itinéraire qui est sur le point d'arriver par la droite lorsque changer d'itinéraire ?

Answer 1

Ajouter une transition directement dans le composant

Answer 2

Voulez-vous simuler la méthode de changement d'itinéraire de l'APP

J'ai récemment voulu faire un petit projet. C'est encore un produit semi-fini, mais la partie transition a déjà mis en œuvre cette opération. Vous pouvez aller voir si c'est ce que vous voulez

.

https://github.com/tgxpuisb/vue-open-use

Answer 3

Régler le mode sur sortie-entrée