App.vue 799 B

12345678910111213141516171819202122232425262728293031323334353637383940
  1. <template>
  2. <div :class="{ fullscreen: isFullscreen }">
  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. isFullscreen: false // 是否全屏
  21. };
  22. }
  23. };
  24. </script>
  25. <style lang="scss">
  26. .router-fade-enter-active,
  27. .router-fade-leave-active {
  28. transition: opacity 0.3s;
  29. }
  30. .router-fade-enter,
  31. .router-fade-leave-to {
  32. opacity: 0;
  33. }
  34. .fullscreen {
  35. .van-nav-bar {
  36. background-color: red;
  37. }
  38. }
  39. </style>