我有以下 App.vue 檔案：
<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>
以及以下路由器檔案：
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;
當我執行應用程式並點擊任何連結時，無論使用$router.push("/dashboard"); 或router-link(to ="/dashboard" active-class="active") 。我已經檢查了許多其他問題和教程，但不幸的是它仍然不起作用。知道為什麼沒有發生轉換嗎？
更改：
至
轉換沒有偵測到視圖的變化，因此您需要提供一些可以改變的內容。 另外，請記住
fade必須是 CSS 中的實際動畫，例如：.fade-enter-active { animation: fade 0.25s; } .fade-leave-active { animation: fade 0.25s reverse; } @keyframes fade { from { opacity: 0%; } to { opacity: 100%; } }您可以在程式碼中更改一些內容。
首先，您不需要宣告
RouterView的匯入，因為它是 全球註冊。只要您的專案中安裝了vue-router，您就可以直接在範本上安全地使用RouterView或router-view。其次，您需要將
name屬性變更為靜態屬性。寫:name="fade"意味著您將變數fade的值傳遞給name。根據您的程式碼，我假設fade不是變數而是字串，這意味著您需要將 prop 更改為name="fade"。詳細了解靜態和動態道具。 p>最後，過渡需要使用 CSS。由於您要聲明命名轉換，因此您需要新增以下 CSS：
.fade-enter-active, .fade-leave-active { transition: opacity 0.5s ease; } .fade-enter-from, .fade-leave-to { opacity: 0; }注意 CSS 中
fade的使用。這是name屬性中提供的值，這表示如果您有：那麼你的 CSS 應該有
.slide-in-enter-active、.slide-in-enter-leave等。