Les composants de la page Nouveau routeur ne se chargeront qu'après avoir actualisé manuellement la page entière

Question

J'ai ajouté un nouvel itinéraire et ajouté une animation pour passer au nouvel itinéraire.

J'ai ajouté le code suivant qui poussera le nouvel itinéraire (/premier) lorsque vous cliquerez sur le bouton :

/* From the Template */
<router-view @clickedNext1="onClickTransition" v-slot="{ Component }">
    <transition name="route1" mode="out-in">
      <component :is="Component"></component>
    </transition>
  </router-view>

/* From the Script */
 methods: {
    onClickTransition() {
      this.$router.push("/first");
    },

Maintenant, le problème est que lorsque je clique sur le bouton et appelle la méthode "onClickTransition", le routeur semble bien poussé, mais la page est vide. Le composant est rendu uniquement lorsque j'actualise la page manuellement en appuyant sur ctrl+R.

Je pense que le problème peut venir de l'insertion de l'animation, mais si j'actualise la page manuellement, l'animation fonctionne très bien. Donc je ne sais pas quel est le problème. Je serai très reconnaissant pour votre aide.

Voici le reste du code pour app.vue :

<template>
  <router-view @clickedNext1="onClickTransition" v-slot="{ Component }">
    <transition :key="$route.fullPath" name="route1" mode="out-in">
      <component :is="Component" />
    </transition>
  </router-view>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {};
  },
  methods: {
    onClickTransition() {
      this.$router.push("/first");
    },
    leave(event) {
      event.preventDefault();
      event.returnValue = "";
    },
  },

  mounted() {
    window.addEventListener("beforeunload", this.leave);
  },

  beforeUnmount() {
    window.removeEventListener("beforeunload", this.leave);
  },
};
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #fff;
  background-color: #151515;
  position: relative;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  margin: 0px;
}

/* route transition */
.route1-enter-from {
  opacity: 0;
}
.route1-enter-active {
  transition: all 3s ease-in;
}
.route1-leave-to {
  opacity: 0;
}
.route1-leave-active {
  transition: all 3s ease-in;
}
</style>

Partie code dans index.js :

import { createRouter, createWebHistory } from "vue-router";
import MainPage from "../views/MainPage.vue";
import FirstScene from "../views/FirstScene.vue";

const routes = [
  {
    path: "/",
    name: "main",
    component: MainPage,
  },
  {
    path: "/first",
    name: "first",
    component: FirstScene,
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

La méthode "onClickTransition" provient du composant "PreStartPage.vue", qui est un sous-composant de la route principale "MainPage.vue".

Une fois le bouton "Suivant" cliqué dans "PreStartPage.vue", il enverra un événement à "MainPage.vue" en utilisant this.$emit."MainPage.vue" puis recevra l'événement en utilisant une méthode nommée "onClickNext1" , qui envoie un signal à "App.vue" via un autre this.$emit. C'est de là que vient le "@clickedNext1" affiché dans App.vue.

Voici le code dans "PreStartPage.vue":

<script>
export default {
  name: "PreStartPage",
  methods: {
    onClickNext() {
      this.$emit("clickedNext");
    },
  },
};
</script>

Voici le code de "MainPage.vue":

<script>
import PreStartPage from "../components/PreStartPage.vue";
export default {
  name: "MainPage",
  components: { PreStartPage },
  data() {
    return { showMain: true, showPre: false };
  },
  methods: {
    toggleMain() {
      this.showMain = !this.showMain;
      this.showPre = !this.showPre;
    },
    onClickNext1() {
      this.$emit("clickedNext1");
    },
  },
};
</script>

Answer 1

Essayez de modifier votre code comme ceci :

/* From the Template */

 
  
 

L'attribut "key" défini sur $route.fullPath doit garantir que la conversion est effectuée correctement à chaque changement d'itinéraire.

Modifier

Pour résoudre ce problème, vous pouvez ajouter les attributs ":enter-active-class" et ":leave-active-class" au composant de transition, ce qui permet de spécifier la classe qui doit être appliquée à l'élément lors de la transition. .

Dans le composant App.vue, vous pouvez mettre à jour le composant de transformation comme ceci :

Cela garantira que la classe correcte est appliquée à l'élément pendant la transition et que le composant est entièrement rendu avant le début de l'animation.

Pour plus d'informations je vous recommande de visiter le wiki officiel : https://vuejs.org/guide/built-ins/transition.html#css-based-transitions