App.vue 650 B

123456789101112131415161718192021222324252627282930313233
  1. <template>
  2. <div>
  3. <template>
  4. <transition name="router-fade" mode="out-in">
  5. <keep-alive>
  6. <router-view v-if="$route.meta.keepAlive"></router-view>
  7. </keep-alive>
  8. </transition>
  9. <transition name="router-fade" mode="out-in">
  10. <router-view v-if="!$route.meta.keepAlive"></router-view>
  11. </transition>
  12. </template>
  13. </div>
  14. </template>
  15. <script>
  16. export default {
  17. name: "app",
  18. data() {
  19. return {};
  20. }
  21. };
  22. </script>
  23. <style lang="scss">
  24. .router-fade-enter-active,
  25. .router-fade-leave-active {
  26. transition: opacity 0.3s;
  27. }
  28. .router-fade-enter,
  29. .router-fade-leave-to {
  30. opacity: 0;
  31. }
  32. </style>