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

您可以在代码中更改一些内容。

首先，您不需要为RouterView声明导入，因为它是全局注册的。 只要你的项目中安装了vue-router ，你就可以安全地直接在你的模板上使用RouterView或router-view 。

其次，您需要将name道具更改为静态道具。 写作:name="fade"意味着您将变量fade的值传递给name 。 根据您的代码，我假设fade不是变量而是字符串，这意味着您需要将道具更改为name="fade" 。 阅读更多关于静态和动态道具的信息。

最后，转换需要使用 CSS。 由于您要声明一个命名的 transition ，因此您需要添加以下 CSS：

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

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

注意 CSS 中fade的使用。 这是name prop 中提供的值，这意味着如果你有例如：

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

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

Answer 2

改变：

<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%;
        }
    }