代码调整

vue/src/layout/component/Main/component/BackToTop.vue

@@ -0,0 +1,21 @@
+<script type="text/jsx">
+export default {
+    name: "BackToTop",
+
+    functional: true,
+
+    props: {render: Boolean},
+
+    render(h, context) {
+        const {props: {render}} = context
+        if (!render) return
+        return (
+            <el-backtop target=".app-main .scroll-container" visibility-height={400} bottom={66}>
+                <div class="back-to-top">
+                    <v-icon icon="el-icon-top"/>
+                </div>
+            </el-backtop>
+        )
+    }
+}
+</script>

vue/src/layout/component/Main/component/KeepRouterViewAlive.vue

@@ -1,3 +1,4 @@
+<script>
 import {isEmpty} from "@/util"
 
 const KEY = '_routerViewKey'
@@ -37,6 +38,7 @@ function getCacheKey(route, componentOptions) {
 
 export default {
     name: 'keep-router-view-alive',
+
     abstract: true,
 
     props: {include: Array},
@@ -97,3 +99,4 @@ export default {
         return vnode || (slot && slot[0])
     }
 }
+</script>

vue/src/layout/component/Main/component/PageFooter.vue

@@ -8,7 +8,7 @@
 
 <script>
 export default {
-    name: "Footer"
+    name: "PageFooter"
 }
 </script>
 

vue/src/layout/component/Main/component/PageView.vue

@@ -0,0 +1,27 @@
+<script type="text/jsx">
+import KeepRouterViewAlive from "./KeepRouterViewAlive"
+
+export default {
+    name: "PageView",
+
+    functional: true,
+
+    props: {
+        include: Array,
+        transitionName: String
+    },
+
+    render(h, context) {
+        const {include, transitionName} = context.props
+        return (
+            <div class="page-view">
+                <KeepRouterViewAlive include={include}>
+                    <transition name={transitionName} mode="out-in">
+                        <router-view/>
+                    </transition>
+                </KeepRouterViewAlive>
+            </div>
+        )
+    }
+}
+</script>

vue/src/layout/component/Main/index.vue

@@ -1,14 +1,8 @@
 <template>
     <main class="app-main">
         <div v-show="!showIframe" class="scroll-container">
-            <div class="page-view">
+            <page-view :include="cachedViews" :transition-name="transitionName"/>
-                <keep-router-view-alive :include="cachedViews">
+            <page-footer/>
-                    <transition :name="transitionName" mode="out-in">
-                        <router-view/>
-                    </transition>
-                </keep-router-view-alive>
-            </div>
-            <v-footer/>
         </div>
 
         <!--跨域iframe无法调整高度，只能使用原生滚动条-->
@@ -23,28 +17,20 @@
             width="100%"
         />
 
-        <el-backtop
+        <back-to-top :render="showBackToTop"/>
-            v-if="showBackToTop"
-            target=".app-main .scroll-container"
-            :visibility-height="400"
-            :bottom="66"
-        >
-            <div class="back-to-top">
-                <v-icon icon="el-icon-top"/>
-            </div>
-        </el-backtop>
     </main>
 </template>
 
 <script>
 import {mapState} from 'vuex'
-import KeepRouterViewAlive from "./KeepAlive"
+import BackToTop from "./component/BackToTop"
-import VFooter from "./Footer"
+import PageView from "./component/PageView"
+import PageFooter from "./component/PageFooter"
 
 export default {
     name: 'AppMain',
 
-    components: {KeepRouterViewAlive, VFooter},
+    components: {BackToTop, PageView, PageFooter},
 
     computed: {
         ...mapState('setting', ['showBackToTop']),