2

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

这是我的过渡设置为最小的可重现示例，在这里工作Codepen 您可以看到当从Home路由切换到任何其他路由时，按钮会立即消失，而视图的其余部分会根据使用 css 设置的淡入淡出属性（和 vue 过渡）消失.

// https://github.com/groloop/vuejs-2-series
Vue.use(Vuetify);
Vue.use(VueRouter);

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

var AboutUs = {
  template: '<h2>About Us</h2>'
}

var Contact = {
  template: '<h2>Contact</h2>'
}

var NotFound = {
  template: '<h2>Not Found</h2>'
}


var router = new VueRouter({
  history: false,
  routes: [
    { path: '/', name: 'home', component: Home },
    { path: '/about-us', name: 'about-us', component: AboutUs },
    { path: '/contact', name: 'contact', component: Contact },
    { path: '*', name: 'not-found', component: NotFound }
  ],
});

new Vue({
  el: '#app',
  router: router
});

.fade-enter-active,
.fade-leave-active {
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: ease-in;
}

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

.fade-enter,
.fade-leave-active {
  opacity: 0
}

<link href="https://unpkg.com/vuetify@1.5.16/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://unpkg.com/vuetify@1.5.16/dist/vuetify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.10/vue.js"></script>
<div id="app">
  <v-toolbar>
    <v-toolbar-title>TEST</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-toolbar-items>
      <v-btn flat href="#/">Home</v-btn>
      <v-btn flat href='#/about-us'>About us</v-btn>
      <v-btn flat href='#/contact'>Contact</v-btn>
      <v-btn flat href='#/test'>Test</v-btn>
    </v-toolbar-items>
  </v-toolbar>
  <transition name="fade" mode="out-in">
    <router-view></router-view>
  </transition>
</div>
4

1 回答 1

2

这可能是由于v-tooltip内部工作方式的原因。可以看到，如果将按钮组件放在组件中的模板槽之外v-tooltip，transition 可以正常工作。

v-tooltip组件可能有一个销毁生命周期钩子，它只会销毁渲染的 DOM 节点，这可能会导致问题。一种解决方法是保持<router-view>活力：

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

但是，这可能并不理想，特别是如果路由器使用了非常重的组件，或者如果您有很多视图要保持活动状态：

解决方案 1：限制组件的最大数量以保持活动状态

由于您只关心最后一个被破坏的组件的淡出，您可以使用包装器max上的属性，<keep-alive>以便您只保留最后一个被破坏的元素。像这样的东西会起作用：

<transition name="fade" mode="out-in">
  <keep-alive v-bind:max="2">
    <router-view></router-view>
  </keep-alive>
</transition>

解决方案 2：显式包含需要保持活动状态的组件

或者，您可以选择性地保持组件处于<v-tooltip>活动状态。在您的示例中，只有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'
}

然后动态绑定一个数组到组件include上的属性<keep-alive>：

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

在你的 JS 中：

new Vue({
  el: '#app',
  router: router,
  data: {
    componentsToKeepAlive: ['Home']
  }
});
于 2020-04-01T12:29:47.457 回答