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

【问题标题】：Vue transitions do not work for router-view with reusable componentVue 转换不适用于具有可重用组件的路由器视图
【发布时间】：2020-05-30 09:27:50
【问题描述】：

所以我创建了一个组件，我只在其中放置了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> 中的可重用组件？

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component vue-router

【解决方案1】：

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

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

key 属性告诉 Vue 在key 值更改时使用组件的不同实例（而不是重用现有实例）。使用$route.fullPath，每次路线更改时都会如此。

【讨论】：