BasicLayout.vue 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <template>
  2. <global-layout>
  3. <transition name="page-transition">
  4. <keep-alive v-if="keepAlive">
  5. <router-view/>
  6. </keep-alive>
  7. <router-view v-else/>
  8. </transition>
  9. </global-layout>
  10. </template>
  11. <script>
  12. import GlobalLayout from '@/components/page/GlobalLayout'
  13. export default {
  14. name: "BasicLayout",
  15. components: {
  16. GlobalLayout
  17. },
  18. data() {
  19. return {}
  20. },
  21. computed: {
  22. keepAlive() {
  23. return this.$route.meta.keepAlive
  24. }
  25. },
  26. methods: {},
  27. }
  28. </script>
  29. <style lang="scss">
  30. /*
  31. * The following styles are auto-applied to elements with
  32. * transition="page-transition" when their visibility is toggled
  33. * by Vue.js.
  34. *
  35. * You can easily play with the page transition by editing
  36. * these styles.
  37. */
  38. .page-transition-enter {
  39. opacity: 0;
  40. }
  41. .page-transition-leave-active {
  42. opacity: 0;
  43. }
  44. .page-transition-enter .page-transition-container,
  45. .page-transition-leave-active .page-transition-container {
  46. -webkit-transform: scale(1.1);
  47. transform: scale(1.1);
  48. }
  49. </style>