feat: add multipage mode

src/components/setting/Setting.vue

@@ -55,6 +55,10 @@
           显示抽屉按钮
           <a-switch slot="actions" size="small" />
         </a-list-item>
+        <a-list-item>
+          多页签模式
+          <a-switch :checked="multipage" slot="actions" size="small" @change="setMultipage" />
+        </a-list-item>
       </a-list>
     </setting-item>
     <a-divider />
@@ -99,6 +103,11 @@ export default {
     SettingItem,
     AIcon,
     ALayoutSider},
+  computed: {
+    multipage () {
+      return this.$store.state.setting.multipage
+    }
+  },
   methods: {
     onColorChange (values, colors) {
       if (colors.length > 0) {
@@ -118,6 +127,9 @@ export default {
         _this.$message.success(`复制成功`)
         clipboard.destroy()
       })
+    },
+    setMultipage (checked) {
+      this.$store.commit('setting/setMultipage', checked)
     }
   }
 }

src/layouts/MenuView.vue

@@ -1,16 +1,83 @@
 <template>
   <global-layout>
+    <a-tabs v-if="multipage" :active-key="activePage" style="margin-bottom: 8px" :hide-add="true" type="editable-card" @change="changePage" @edit="editPage">
+      <a-tab-pane v-on="$listeners" :key="page.fullPath" v-for="page in pageList" :tab="page.name"/>
+    </a-tabs>
     <transition name="page-toggle">
+      <keep-alive v-if="multipage">
         <router-view />
+      </keep-alive>
+      <router-view v-else />
     </transition>
   </global-layout>
 </template>
 
 <script>
 import GlobalLayout from './GlobalLayout'
+import ATabs from 'ant-design-vue/es/tabs'
+const ATabPane = ATabs.TabPane
 export default {
   name: 'MenuView',
-  components: {GlobalLayout}
+  components: {ATabPane, ATabs, GlobalLayout},
+  data () {
+    return {
+      pageList: [],
+      linkList: [],
+      activePage: ''
+    }
+  },
+  computed: {
+    multipage () {
+      return this.$store.state.setting.multipage
+    }
+  },
+  created () {
+    this.pageList.push(this.$route)
+    this.linkList.push(this.$route.fullPath)
+    this.activePage = this.$route.fullPath
+  },
+  watch: {
+    '$route': function (newRoute, oldRoute) {
+      this.activePage = newRoute.fullPath
+      if (!this.multipage) {
+        this.linkList = [newRoute.fullPath]
+        this.pageList = [newRoute]
+      } else if (this.linkList.indexOf(newRoute.fullPath) < 0) {
+        this.linkList.push(newRoute.fullPath)
+        this.pageList.push(newRoute)
+      }
+    },
+    'activePage': function (key) {
+      this.$router.push(key)
+    },
+    'multipage': function (newVal, oldVal) {
+      if (!newVal) {
+        this.linkList = [this.$route.fullPath]
+        this.pageList = [this.$route]
+      }
+    }
+  },
+  methods: {
+    changePage (key) {
+      this.activePage = key
+    },
+    editPage (key, action) {
+      this[action](key)
+    },
+    add () {
+    },
+    remove (key) {
+      if (this.pageList.length === 1) {
+        this.$message.warning('这是最后一页，不能再关闭了啦')
+        return
+      }
+      this.pageList = this.pageList.filter(item => item.fullPath !== key)
+      let index = this.linkList.indexOf(key)
+      this.linkList = this.linkList.filter(item => item !== key)
+      index = index >= this.linkList.length ? this.linkList.length - 1 : index
+      this.activePage = this.linkList[index]
+    }
+  }
 }
 </script>
 

src/layouts/PageView.vue

@@ -4,7 +4,10 @@
       <img :src="extraImage"/>
     </div>
     <transition name="page-toggle">
-      <router-view  ref="page"/>
+      <keep-alive v-if="multipage">
+        <router-view />
+      </keep-alive>
+      <router-view v-else />
     </transition>
   </page-layout>
 </template>
@@ -23,6 +26,11 @@ export default {
       extraImage: ''
     }
   },
+  computed: {
+    multipage () {
+      return this.$store.state.setting.multipage
+    }
+  },
   mounted () {
     this.getPageHeaderInfo()
   },

src/layouts/RouteView.vue

@@ -1,12 +1,20 @@
 <template>
   <transition name="page-toggle">
+    <keep-alive v-if="multipage">
       <router-view />
+    </keep-alive>
+    <router-view v-else />
   </transition>
 </template>
 
 <script>
 export default {
-  name: 'RouteView'
+  name: 'RouteView',
+  computed: {
+    multipage () {
+      return this.$store.state.setting.multipage
+    }
+  }
 }
 </script>
 

src/store/modules/setting.js

@@ -10,7 +10,8 @@ export default {
       {link: 'https://pro.ant.design', name: 'Pro首页'},
       {link: 'https://github.com/iczer/vue-antd-admin', icon: 'github'},
       {link: 'https://ant.design', name: 'Ant Design'}
-    ]
+    ],
+    multipage: true
   },
   mutations: {
     setDevice (state, isMobile) {
@@ -21,6 +22,9 @@ export default {
     },
     setLayout (state, layout) {
       state.layout = layout
+    },
+    setMultipage (state, multipage) {
+      state.multipage = multipage
     }
   }
 }