：parent路由器视图上的关键属性，原因（out）在嵌套路由器视图中失败（out）过渡

Question

预期的是，

我的一个视图中有一个选项卡式导航，该视图触发了将显示要显示的路由器视图。对于这些嵌套路线，我想应用褪色过渡。我希望通过mode in-in-in进行过渡，以便旧的路由器视图首先逐渐淡出，然后新的在。

​

​查看在没有过渡的情况下消失，但是新的>根据需要逐渐消失。

当我删除：key =“ $ oute.fullpath” parent router-view in app.vue（见下文），，嵌套过渡效果很好。但是，由于我重新使用路由器组件，因此我绝对需要一个键属性 router-view 。
您还应该知道，如果没有出现属性，abot-alive围绕嵌套的路由器 - 视图根本不会发生过渡。到目前为止，我根据此问题在github上。
我如何在路由器视图 in app.vue中保留键工作？

app.vue

<div class="main-wrapper">
  <router-view :key="$route.fullPath" />
</div>

profile.vue（应该发生嵌套过渡的地方）

<div class="profile__main">
  <router-view v-slot="{ Component }">
    <Transition name="fade" mode="out-in" appear>
      <keep-alive>
        <component :is="Component"></component>
      </keep-alive>
    </Transition>
  </router-view>
</div>

[...]

.fade-enter-from, .fade-leave-to {
    opacity: 0;
}

.fade-leave-active {
    transition-duration: 500ms;
    transition-property: all;
    transition-timing-function: ease;
}

.fade-enter-active {
    transition-duration: 300ms;
    transition-property: all;
    transition-timing-function: ease;
}

路由器/index.js

{
    path: '/profile',
    name: 'Profile',
    component: Profile,
    meta: {
      requiresAuth: true,
      title: 'Your Profile',
    },

    children: [
      {
        path: '',
        name: 'ProfileOverview',
        component: ProfileOverview,
      },
      {
        path: 'settings',
        name: 'ProfileSettings',
        component: ProfileSettings,
        meta: {
          title: 'Your Profile Settings',
        },
      },
      {
        path: 'subscriptions',
        name: 'ProfileSubscriptions',
        component: ProfileSubscriptions,
        meta: {
          title: 'Your Subscriptions',
        },
      }]
  },

Answer 1

我遇到了可能与您有关的类似问题。在我的情况下，我使用＆lt; suspense＆gt;与异步页/组件，并且仅过渡。因此，我想保持旧组件可见，直到准备好了，然后进行过渡。问题是，在＆lt; router-view＆gt; 旧页面上使用唯一时，旧页面正在立即消失，但有空白（或指定的悬念后备），最后过渡到新页面开始。没有键过渡，它像我想要的那样工作，因此页面之间没有空白/后备。

无论如何，我对此进行了描述，以便有人可以谷歌搜索。

快速解决方案在这里： https://github.com/vuejs/vuejs/router/router/1175

因此，如果我们使用插槽中的组件，则应在该组件上而不是路由器视图上。

因此，请尝试以下操作：

<div class="profile__main">
  <router-view v-slot="{ Component }">
    <Transition name="fade" mode="out-in" appear>
      <component :is="Component" :key="$route.fullPath"></component>
    </Transition>
  </router-view>
</div>