路由切换的白色动画添加判断

src/layout/components/AppMain.vue

 <template>
   <section class="app-main">
     <div class="container">
-      <transition name="fade-transform" mode="out-in">
-        <router-view :key="key" class="app-container-bg" />
+<!--      transition组件（过度动画）fade-transform（淡入变换）-->
+      <transition :name="animation" mode="out-in">
+<!--        keep-alive组件，使被包含的组件保留状态，或避免重新渲染（匹配到的视图组件都会被缓存）-->
+        <keep-alive include="Home">
+          <router-view :key="key" class="sf-jump-page" />
+        </keep-alive>
       </transition>
     </div>
   </section>
@@ -14,40 +18,28 @@ export default {
   computed: {
     key() {
       return this.$route.path
+    },
+    animation() {
+      return this.$route.meta.needAnimation ? 'fade-transform' : undefined
     }
   }
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .app-main {
   /*50 = navbar  */
   /*min-height: 100vh;*/
   width: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
   position: relative;
-  overflow: hidden;
-  background-color: #F4F4F4;
-  .container{
-    /*background-color: #ffffff;*/
-    min-height: calc(92.4vh - 95px);
-    //margin: 0 14px 14px 14px;
-    border-radius: 3px;
-    background: #FFFFFF;
-  }
-  .app-container-bg{
-    background-color: #ffffff;
-  }
-}
-.fixed-header+.app-main {
-  //padding-top: 50px;
-}
-</style>
-
-<style lang="scss">
-// fix css style bug in open el-dialog
-.el-popup-parent--hidden {
-  .fixed-header {
-    padding-right: 15px;
+  /*background: #fffff;*/
+  background-color: #f4f4f4;
+  padding-bottom: 0;
+  box-sizing: border-box;
+  .sf-jump-page {
+    min-height: calc(100vh - 178px);
   }
 }
 </style>