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"。详细了解静态和动态道具。 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 属性中提供的值，这意味着如果您有：

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

那么你的 CSS 应该有 .slide-in-enter-active、.slide-in-enter-leave 等。