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?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Ubah:
kepada
Peralihan tidak mengesan perubahan pada paparan, jadi anda perlu menyediakan sesuatu yang boleh berubah. Juga, ingat bahawa
fademestilah 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%; } }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. p>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的使用。这是namedalam CSS, yang bermaksud jika anda mempunyai:Maka CSS anda sepatutnya mempunyai
.slide-in-enter-active、.slide-in-enter-leavedsb.