Vue.js Vue转换和组件的即时淡出

目前，在Vue中使用transition时，我面临的问题是页面上的某些组件会立即消失，而其余组件则会随着整个页面正常消失

这是我的转换设置为最小可复制的示例，正在这里工作 您可以看到，当从

Home

路由切换到任何其他路由时，按钮会立即消失，而视图的其余部分会根据使用css设置的淡入淡出属性（和vue转换）消失

//https://github.com/groloop/vuejs-2-series
Vue.use（Vuetify）；
Vue.use（VueRouter）；
var Home={
模板：“主页左侧工具提示”
}
var AboutUs={
模板：“关于我们”
}
var触点={
模板：“联系人”
}
未找到变量={
模板：“未找到”
}
var路由器=新的VueRouter({
历史：错，
路线：[
{路径：'/'，名称：'home'，组件：home}，
{path:'/about us'，name:'about us'，component:AboutUs}，
{路径：'/contact'，名称：'contact'，组件：contact}，
{路径：'*'，名称：'未找到'，组件：未找到}
],
});
新Vue({
el:“#应用程序”，
路由器：路由器
});

。淡入激活状态，
.淡入淡出激活状态{
过渡时间：0.5s；
过渡特性：不透明度；
过渡时间功能：轻松进入；
}
。淡入激活状态{
转换延迟：.5s；
}
.淡入，
.淡入淡出激活状态{
不透明度：0
}

试验
家
关于我们
接触
试验

这可能是由于

v-tooltip

的内部工作方式造成的。您可以看到，如果将按钮组件置于

v-tooltip

组件中的模板插槽之外，则转换工作正常

v-tooltip

组件可能有一个销毁生命周期钩子，该钩子只会销毁呈现的DOM节点，这可能会导致问题。解决方法是保持

处于活动状态：

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

解决方案2：明确包含需要保持活动状态的组件 或者，您可以有选择地保持

处于活动状态的组件。在您的示例中，只有

Home

组件有问题，因此您可以为其命名：

var Home = {
  template: '<div> <h2>Home</h2> <v-tooltip> <template v-slot:activator="{ on }"> <v-btn color="primary" dark v-on="on">Left</v-btn> </template> <span>Left tooltip</span> </v-tooltip> </div>',
  name: 'Home'
}

在您的JS中：

new Vue({
  el: '#app',
  router: router,
  data: {
    componentsToKeepAlive: ['Home']
  }
});

---

谢谢，这就解决了这个问题，但我也有类似的问题，正如你所说的严重的共有。例如，还有一个包含图表的组件，它也会像这个按钮一样消失。你认为像这样的一个组件“保持活动”可能会对应用程序性能有害吗？如果你保持渲染的每个组件的活动，是的，这将是昂贵的。您还可以设置要保持活动状态的组件的最大数量：毕竟，您只关心保持路由器视图中最后一个被破坏组件的活动状态，以便淡出工作<代码>应该可以正常工作。

<transition name="fade" mode="out-in">
  <keep-alive :include="componentsToKeepAlive">
    <router-view></router-view>
  </keep-alive>
</transition>

new Vue({
  el: '#app',
  router: router,
  data: {
    componentsToKeepAlive: ['Home']
  }
});