我有以下 App.vue 文件：
2
469<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")。我已经检查了许多其他问题和教程，但不幸的是它仍然不起作用。知道为什么没有发生转换吗？
收藏
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2024 //m.sbmmt.com/ All Rights Reserved | php.cn | 湘ICP备2023035733号
更改：
至
转换没有检测到视图的变化，因此您需要提供一些可以改变的内容。 另外，请记住
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等。