AppMain.vue 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <template>
  2. <section class="app-main">
  3. <!-- -->
  4. <transition name="fade-transform" mode="out-in">
  5. <div>
  6. <router-view v-slot="{ Component }">
  7. <keep-alive>
  8. <component v-if="!keep" :is="Component" />
  9. </keep-alive>
  10. <component v-if="keep" :is="Component" />
  11. </router-view>
  12. <!-- <keep-alive exclude="nocatch">
  13. <router-view :key="key" v-if="needKeep" />
  14. </keep-alive>
  15. <router-view v-if="!needKeep" :key="key" /> -->
  16. </div>
  17. </transition>
  18. </section>
  19. </template>
  20. <script>
  21. import notKeepAliveList from "@/router/notKeepAliveList";
  22. export default {
  23. name: "AppMain",
  24. computed: {
  25. key() {
  26. return this.$route.path;
  27. },
  28. needKeep() {
  29. return !notKeepAliveList.includes(this.$route.path);
  30. },
  31. cachedViews() {
  32. return this.$store.state.tagsView.cachedViews;
  33. },
  34. keep() {
  35. return this.$route.meta.noCache*1; // 0是缓存 1是不缓存
  36. },
  37. },
  38. };
  39. </script>
  40. <style scoped>
  41. .app-main {
  42. /*50 = navbar */
  43. /* height: calc(100vh - 80px); */
  44. /* height: 100vh; */
  45. padding-top: 80px;
  46. /* min-width: 1440px; */
  47. position: relative;
  48. /* overflow: auto; */
  49. box-sizing: border-box;
  50. margin-left: 10px;
  51. margin-top: 20px;
  52. }
  53. .fixed-header + .app-main {
  54. padding-top: 80px;
  55. }
  56. </style>
  57. <style lang="scss">
  58. // fix css style bug in open el-dialog
  59. .el-popup-parent--hidden {
  60. .fixed-header {
  61. padding-right: 15px;
  62. }
  63. }
  64. </style>