Ich habe eine neue Route hinzugefügt und eine Animation für den Übergang zur neuen Route hinzugefügt.

Ich habe den folgenden Code hinzugefügt, der die neue Route (/first) pusht, wenn auf die Schaltfläche geklickt wird:

/* 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");
    },

Das Problem besteht nun darin, dass, wenn ich auf die Schaltfläche klicke und die Methode „onClickTransition“ aufrufe, der Router offenbar einwandfrei gepusht wird, die Seite jedoch leer ist. Die Komponente wird nur gerendert, wenn ich die Seite manuell durch Drücken von Strg+R aktualisiere.

Ich glaube, das Problem könnte vom Einfügen der Animation herrühren, aber wenn ich die Seite manuell aktualisiere, funktioniert die Animation einwandfrei. Ich weiß also nicht, was das Problem ist. Ich werde für Ihre Hilfe sehr dankbar sein.

Dies ist der Rest des Codes für 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>

Codeteil in 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;

Die Methode „onClickTransition“ stammt von der Komponente „PreStartPage.vue“, die eine Unterkomponente der Hauptroute „MainPage.vue“ ist.

Sobald in „PreStartPage.vue“ auf die Schaltfläche „Weiter“ geklickt wird, wird mithilfe von this.$emit.“MainPage.vue“ ein Ereignis an „MainPage.vue“ gesendet und das Ereignis dann mithilfe einer Methode namens „onClickNext1“ empfangen. , das über ein anderes this.$emit ein Signal an „App.vue“ sendet. Hierher kommt das in App.vue angezeigte „@clickedNext1“.

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