Saya menambah laluan baharu dan menambahkan animasi untuk beralih ke laluan baharu.

Saya menambah kod berikut yang akan menolak laluan baharu (/pertama) apabila butang diklik:

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

Sekarang masalahnya ialah apabila saya mengklik butang dan memanggil kaedah "onClickTransition", penghala nampaknya ditolak dengan baik, tetapi halamannya kosong. Komponen dipaparkan hanya apabila saya memuat semula halaman secara manual dengan menekan ctrl+R.

Saya percaya masalah mungkin datang daripada sisipan animasi, tetapi jika saya memuat semula halaman secara manual, animasi itu berfungsi dengan baik. Jadi saya tidak tahu apa masalahnya. Saya akan sangat berterima kasih atas bantuan anda.

Ini ialah kod yang lain untuk 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>

Kod bahagian dalam 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;

Kaedah "onClickTransition" berasal daripada komponen "PreStartPage.vue", yang merupakan subkomponen laluan utama "MainPage.vue".

Setelah butang "Seterusnya" diklik dalam "PreStartPage.vue", ia akan menghantar acara ke "MainPage.vue" menggunakan ini.$emit."MainPage.vue" dan kemudian menerima acara menggunakan kaedah bernama "onClickNext1" , yang menghantar isyarat kepada "App.vue" melalui satu lagi ini.$emit Di sinilah "@clickedNext1" yang ditunjukkan dalam App.vue berasal.

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