Browse Source

fix: custom route-view keepAlive

Sendya 6 years ago
parent
commit
ea9404d227
2 changed files with 18 additions and 3 deletions
  1. 10 1
      src/layouts/PageView.vue
  2. 8 2
      src/layouts/RouteView.vue

+ 10 - 1
src/layouts/PageView.vue

@@ -41,7 +41,10 @@
       <div class="page-header-index-wide">
         <slot>
           <!-- keep-alive  -->
-          <router-view ref="content"></router-view>
+          <keep-alive v-if="multiTab">
+            <router-view ref="content" />
+          </keep-alive>
+          <router-view v-else ref="content" />
         </slot>
       </div>
     </div>
@@ -49,6 +52,7 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
 import PageHeader from '@/components/PageHeader'
 
 export default {
@@ -80,6 +84,11 @@ export default {
       tabs: {}
     }
   },
+  computed: {
+    ...mapState({
+      multiTab: state => state.app.multiTab
+    })
+  },
   mounted () {
     this.getPageMeta()
   },

+ 8 - 2
src/layouts/RouteView.vue

@@ -1,6 +1,12 @@
 <script>
 export default {
   name: 'RouteView',
+  props: {
+    keepAlive: {
+      type: Boolean,
+      default: true
+    }
+  },
   data () {
     return {}
   },
@@ -17,10 +23,10 @@ export default {
     // 这里增加了 multiTab 的判断,当开启了 multiTab 时
     // 应当全部组件皆缓存,否则会导致切换页面后页面还原成原始状态
     // 若确实不需要,可改为 return meta.keepAlive ? inKeep : notKeep
-    if (meta.keepAlive === false) {
+    if (!getters.multiTab && meta.keepAlive === false) {
       return notKeep
     }
-    return getters.multiTab || meta.keepAlive ? inKeep : notKeep
+    return this.keepAlive || getters.multiTab || meta.keepAlive ? inKeep : notKeep
   }
 }
 </script>