javascript - Vue 转换不适用于具有可重用组件的路由器 View

Question

所以我创建了组件，其中放置了 router-view仅基于组件更改的路由。值得注意的是，这是第二个router-view第一个放在 App.vue 中组件和转换与该工作一起工作(它们适用于除下面组件中包含的路由之外的所有路由)

MainComponent.vue

<template>
<transition name="fade" mode="out-in">
     <router-view></router-view>
</transition>
</template>


<style>
.fade-enter-active, .fade-leave-active {
  transition-property: opacity;
  transition-duration: .25s;
}

.fade-enter-active {
  transition-delay: .25s;
}

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

这是路线设置。

{
    path: '/main',
    name: 'main',
    component: () => import('../views/MainComponent.vue'),
    children: [
      {

        path: 'first',
        name: 'first',
        props: { titleName: "First",},
        component: () => import('../components/Component.vue')
      },
      {

        path: 'second',
        name: 'second',
        props: { titleName: "Second"},
        component: () => import('../components/Component.vue')
      },
      {

        path: 'third',
        name: 'third',
        props: { titleName: "Third"},
        component: () => import('../components/Component.vue')
      }
   ]
  }

在 <router-view> 中，转换是否需要特殊设置才能与可重用组件一起使用？ ？

Answer 1

当您进入一个您已经在查看其组件的路由时，默认情况下该组件会被重用，因此不会触发 DOM 转换。将您的 router-view 更改为:

<router-view :key="$route.fullPath" />

key 属性告诉 Vue 在 key 值发生变化时使用组件的不同实例(而不是重复使用现有的实例)。使用 $route.fullPath，每次路线更改时都会出现。