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.

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

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