Vue 转换不适用于具有可重用组件的路由器视图

Question

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

主组件.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，这将是每次路线更改时。