Les transitions Vue ne fonctionnent pas avec router-link et $router.push

Question

J'ai le fichier App.vue suivant :

<script setup>
import { RouterView } from "vue-router";
</script>

<template>
  <RouterView v-slot="{ Component }">
    <transition :name="fade" mode="out-in">
      <component :is="Component" />
    </transition>
  </RouterView>
</template>

Et les fichiers du routeur suivants :

import { createRouter, createWebHistory } from "vue-router";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "signin",
      component: () => import("../views/signin.vue"),
    },
    {
      path: "/dashboard",
      name: "dashboard",
      component: () => import("../views/dashboard.vue"),
    },
  ],
});

export default router;

Lorsque j'exécute l'application et que je clique sur n'importe quel lien, que ce soit en utilisant $router.push("/dashboard"); J'ai vérifié de nombreuses autres questions et tutoriels mais malheureusement cela ne fonctionne toujours pas. Une idée de pourquoi la conversion ne se produit pas ? router-link(to ="/dashboard" active-class="active")

Answer 1

Changement :

<component :is="Component" />

à

<component :key="$route.path" :is="Component"/>

Les transitions ne détectent pas les modifications apportées à la vue, vous devez donc fournir quelque chose qui peut changer. N'oubliez pas non plus que fade doit être une véritable animation en CSS, par exemple :

    .fade-enter-active
    {
        animation: fade 0.25s;
    }

    .fade-leave-active
    {
        animation: fade 0.25s reverse;
    }

    @keyframes fade 
    {
        from
        {
            opacity: 0%;
        }

        to
        {
            opacity: 100%;
        }
    }

Answer 2

Vous pouvez modifier certaines choses dans le code.

Tout d’abord, vous n’avez pas besoin de déclarer RouterView 的导入，因为它是 全球注册。只要您的项目中安装了 vue-router，您就可以直接在模板上安全地使用 RouterView 或 router-view.

Deuxièmement, vous devez name 属性更改为静态属性。编写 :name="fade" 意味着您将变量 fade 的值传递给 name。根据您的代码，我假设 fade 不是变量而是字符串，这意味着您需要将 prop 更改为 name="fade". Apprenez-en davantage sur les Accessoires statiques et dynamiques.

Enfin, les transitions nécessitent l'utilisation de CSS. Puisque vous déclarez une transformation nommée, vous devez ajouter le CSS suivant :

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

Faites attention aux valeurs fournies dans l'attribut fade 的使用。这是 name en CSS, ce qui signifie si vous avez :

<transition name="slide-in" mode="out-in">

Alors votre CSS devrait avoir .slide-in-enter-active、.slide-in-enter-leave etc.