导航到同一组件时如何在 vue.js 中添加页面过渡

Question

我想要在 vue 中导航到不同页面时有这个淡入淡出动画。

当我导航到的路线与之前的路线附加了不同的组件时，这效果很好。

但是当导航到不同的路线（例如从

'/'

到

'/2'

）但两条路线都附加了相同的组件时，它就不再起作用了。未应用转换。

当从路线

'/' or '/2'

导航到

'/3'

时，将应用动画。当从

'/'

到

'/2'

时，它不会被应用。

应用程序.vue：

<template>
  <router-view v-slot="{ Component }">
    <transition name="fade" mode="out-in">
      <component :is="Component" />
    </transition>
  </router-view>
</template>

<script setup></script>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

路由器.js：

import { createRouter, createWebHashHistory } from "vue-router";

import Foo from "./components/Foo.vue";
import Foo-bar from "./components/Foo-bar.vue";

const routes = [
  {
    path: "/",
    component: Foo,
  },
  {
    path: "/2",
    component: Foo,
  },
  {
    path: "/3",
    component: Foo-bar,
  },
  {
    path: "/:catchAll(.*)",
    redirect: "/",
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

Answer 1

为路由器视图标签添加动态

key

，即：

:key="$route.path"

，将强制组件重新渲染。这将有助于解决过渡问题。

您可以参考 here 了解有关什么是边缘情况以及使用动态

key

属性时如何回答的更多信息

<template>
  <router-view :key="$route.path" v-slot="{ Component }">
    <transition name="fade" mode="out-in">
      <component :is="Component" />
    </transition>
  </router-view>
</template>