Peralihan Vue tidak berfungsi dengan pautan penghala dan $router.push

Question

Saya mempunyai fail App.vue berikut:

<script setup>
import { RouterView } from "vue-router";
</script>

<template>
  <RouterView v-slot="{ Component }">
    <transition :name="fade" mode="out-in">
      <component :is="Component" />
    </transition>
  </RouterView>
</template>

Dan fail penghala berikut:

import { createRouter, createWebHistory } from "vue-router";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "signin",
      component: () => import("../views/signin.vue"),
    },
    {
      path: "/dashboard",
      name: "dashboard",
      component: () => import("../views/dashboard.vue"),
    },
  ],
});

export default router;

Apabila saya menjalankan apl dan klik pada mana-mana pautan, sama ada menggunakan $router.push("/dashboard"); atau router-link(to ="/dashboard" active-class="active"). Saya telah menyemak banyak soalan dan tutorial lain tetapi malangnya ia masih tidak berfungsi. Sebarang idea mengapa penukaran tidak berlaku?

Answer 1

Ubah:

<component :is="Component" />

kepada

<component :key="$route.path" :is="Component"/>

Peralihan tidak mengesan perubahan pada paparan, jadi anda perlu menyediakan sesuatu yang boleh berubah. Juga, ingat bahawa fade mestilah animasi sebenar dalam CSS, contohnya:

    .fade-enter-active
    {
        animation: fade 0.25s;
    }

    .fade-leave-active
    {
        animation: fade 0.25s reverse;
    }

    @keyframes fade 
    {
        from
        {
            opacity: 0%;
        }

        to
        {
            opacity: 100%;
        }
    }

Answer 2

Anda boleh menukar beberapa perkara dalam kod.

Pertama sekali, anda tidak perlu mengisytiharkan RouterView 的导入，因为它是 全球注册。只要您的项目中安装了 vue-router，您就可以直接在模板上安全地使用 RouterView 或 router-view.

Kedua, anda perlu name 属性更改为静态属性。编写 :name="fade" 意味着您将变量 fade 的值传递给 name。根据您的代码，我假设 fade 不是变量而是字符串，这意味着您需要将 prop 更改为 name="fade". Ketahui lebih lanjut tentang Props Statik dan Dinamik.

Akhir sekali, peralihan memerlukan penggunaan CSS. Memandangkan anda mengisytiharkan transformasi bernama, anda perlu menambah CSS berikut:

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

Beri perhatian kepada nilai yang disediakan dalam atribut fade 的使用。这是 name dalam CSS, yang bermaksud jika anda mempunyai:

<transition name="slide-in" mode="out-in">

Maka CSS anda sepatutnya mempunyai .slide-in-enter-active、.slide-in-enter-leave dsb.