Komponen pada halaman Penghala Baharu hanya akan dimuatkan selepas memuat semula keseluruhan halaman secara manual

Question

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.

Berikut ialah kod dalam "PreStartPage.vue":

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

Ini ialah kod daripada "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

Cuba ubah suai kod anda seperti ini:

/* From the Template */

 
  
 

Atribut "kunci" yang ditetapkan kepada $route.fullPath hendaklah memastikan penukaran dilakukan dengan betul apabila laluan berubah.

Edit

Untuk menyelesaikan masalah ini, anda boleh menambah atribut ":enter-active-class" dan ":leave-active-class" pada komponen peralihan, yang membolehkan anda menentukan kelas yang harus digunakan pada elemen semasa peralihan .

Dalam komponen App.vue anda boleh mengemas kini komponen transform seperti ini:

Ini akan memastikan kelas yang betul digunakan pada elemen semasa peralihan dan komponen itu dipaparkan sepenuhnya sebelum animasi bermula.

Untuk maklumat lanjut, saya syorkan anda melawati wiki rasmi: https://vuejs.org/guide/built-ins/transition.html#css-based-transitions