feat: add the api of global closing page: $closePage(closeRoute, nextRoute);🌟

新增：增加全局关闭页面api: $closePage(closeRoute, nextRoute)；

src/layouts/header/HeaderAvatar.vue

@@ -14,11 +14,9 @@
         <span>设置</span>
       </a-menu-item>
       <a-menu-divider />
-      <a-menu-item>
-        <a @click="logout">
-          <a-icon style="margin-right: 8px;" type="poweroff" />
-          <span>退出登录</span>
-        </a>
+      <a-menu-item @click="logout">
+        <a-icon style="margin-right: 8px;" type="poweroff" />
+        <span>退出登录</span>
       </a-menu-item>
     </a-menu>
   </a-dropdown>

src/layouts/tabs/TabsView.vue

@@ -61,11 +61,15 @@ export default {
     const route = this.$route
     this.pageList.push(route)
     this.activePage = route.fullPath
+    if (this.multiPage) {
+      window.addEventListener('page:close', this.closePageListener)
+    }
   },
   mounted () {
     this.correctPageMinHeight(-this.tabsOffset)
   },
   beforeDestroy() {
+    window.removeEventListener('page:close', this.closePageListener)
     this.correctPageMinHeight(this.tabsOffset)
   },
   watch: {
@@ -81,6 +85,9 @@ export default {
     'multiPage': function (newVal) {
       if (!newVal) {
         this.pageList = [this.$route]
+        window.removeEventListener('page:close', this.closePageListener)
+      } else {
+        window.addEventListener('page:close', this.closePageListener)
       }
     },
     tabsOffset(newVal, oldVal) {
@@ -95,7 +102,7 @@ export default {
     editPage (key, action) {
       this[action](key) // remove
     },
-    remove (key) {
+    remove (key, next) {
       if (this.pageList.length === 1) {
         return this.$message.warning(this.$t('warn'))
       }
@@ -103,7 +110,9 @@ export default {
       let pageRoute = this.pageList[index]
       this.clearCache(pageRoute)
       this.pageList = this.pageList.filter(item => item.fullPath !== key)
-      if (key === this.activePage) {
+      if (next) {
+        this.$router.push(next)
+      } else if (key === this.activePage) {
         index = index >= this.pageList.length ? this.pageList.length - 1 : index
         this.activePage = this.pageList[index].fullPath
         this.$router.push(this.activePage)
@@ -180,6 +189,11 @@ export default {
     pageName(page) {
       return this.$t(getI18nKey(page.matched[page.matched.length - 1].path))
     },
+    closePageListener(event) {
+      const {closeRoute, nextRoute} = event.detail
+      const closePath = typeof closeRoute === 'string' ? closeRoute : closeRoute.path
+      this.remove(closePath, nextRoute)
+    },
     ...mapMutations('setting', ['setDustbins', 'correctPageMinHeight'])
   }
 }

src/plugins/index.js

@@ -1,10 +1,12 @@
-import VueI18nPlugin from '@/plugins/i18n-extend'
-import AuthorityPlugin from '@/plugins/authority-plugin'
+import VueI18nPlugin from './i18n-extend'
+import AuthorityPlugin from './authority-plugin'
+import TabsPagePlugin from './tabs-page-plugin'
 
 const Plugins = {
   install: function (Vue) {
     Vue.use(VueI18nPlugin)
     Vue.use(AuthorityPlugin)
+    Vue.use(TabsPagePlugin)
   }
 }
 export default Plugins

src/plugins/tabs-page-plugin.js

@@ -0,0 +1,14 @@
+const TabsPagePlugin = {
+  install(Vue) {
+    Vue.mixin({
+      methods: {
+        $closePage(closeRoute, nextRoute) {
+          const event = new CustomEvent('page:close', {detail:{closeRoute, nextRoute}})
+          window.dispatchEvent(event)
+        }
+      }
+    })
+  }
+}
+
+export default TabsPagePlugin