Vue 轉換不適用於 router-link 和 $router.push

Question

我有以下 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") 。我已經檢查了許多其他問題和教程，但不幸的是它仍然不起作用。知道為什麼沒有發生轉換嗎？

Answer 1

更改：

<component :is="Component" />

至

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

轉換沒有偵測到視圖的變化，因此您需要提供一些可以改變的內容。 另外，請記住 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%;
        }
    }

Answer 2

您可以在程式碼中更改一些內容。

首先，您不需要宣告 RouterView 的匯入，因為它是 全球註冊。只要您的專案中安裝了 vue-router，您就可以直接在範本上安全地使用 RouterView 或 router-view。

其次，您需要將 name 屬性變更為靜態屬性。寫 :name="fade" 意味著您將變數 fade 的值傳遞給 name。根據您的程式碼，我假設 fade 不是變數而是字串，這意味著您需要將 prop 更改為 name="fade"。詳細了解靜態和動態道具。

最後，過渡需要使用 CSS。由於您要聲明命名轉換，因此您需要新增以下 CSS：

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

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

注意 CSS 中 fade 的使用。這是 name 屬性中提供的值，這表示如果您有：

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

那麼你的 CSS 應該有 .slide-in-enter-active、.slide-in-enter-leave 等。