添加关闭tab标签之前的回调，添加JS关闭页面的方法

Author: [email protected]

src/components/main/components/tags-nav/tags-nav.vue

@@ -36,6 +36,7 @@
 
 <script>
 import { showTitle, routeEqual } from '@/libs/util'
+import beforeClose from '@/router/before-close'
 export default {
   name: 'TagsNav',
   props: {
@@ -108,8 +109,19 @@ export default {
       }
     },
     handleClose (current) {
-      let res = this.list.filter(item => !routeEqual(current, item))
-      this.$emit('on-close', res, undefined, current)
+      if (current.meta && current.meta.beforeCloseName && current.meta.beforeCloseName in beforeClose) {
+        new Promise(beforeClose[current.meta.beforeCloseName]).then(close => {
+          if (close) {
+            this.close(current)
+          }
+        })
+      } else {
+        this.close(current)
+      }
+    },
+    close (route) {
+      let res = this.list.filter(item => !routeEqual(route, item))
+      this.$emit('on-close', res, undefined, route)
     },
     handleClick (item) {
       this.$emit('input', item)

src/components/main/main.vue

@@ -114,21 +114,16 @@ export default {
       this.collapsed = state
     },
     handleCloseTag (res, type, route) {
-      let openName = ''
       if (type === 'all') {
         this.turnToPage('home')
-        openName = 'home'
       } else if (routeEqual(this.$route, route)) {
         if (type === 'others') {
-          openName = route.name
         } else {
           const nextRoute = getNextRoute(this.tagNavList, route)
           this.$router.push(nextRoute)
-          openName = nextRoute.name
         }
       }
       this.setTagNavList(res)
-      this.$refs.sideMenu.updateOpenName(openName)
     },
     handleClick (item) {
       this.turnToPage(item)
@@ -143,6 +138,7 @@ export default {
       })
       this.setBreadCrumb(newRoute.matched)
       this.setTagNavList(getNewTagList(this.tagNavList, newRoute))
+      this.$refs.sideMenu.updateOpenName(newRoute.name)
     }
   },
   mounted () {

src/libs/util.js

@@ -172,6 +172,7 @@ export const getNextRoute = (list, route) => {
     res = getHomeRoute(list)
   } else {
     const index = list.findIndex(item => routeEqual(item, route))
+    console.log(route, index, list.length)
     if (index === list.length - 1) res = list[list.length - 2]
     else res = list[index + 1]
   }

src/router/before-close.js

@@ -0,0 +1,17 @@
+import { Modal } from 'iview'
+
+const beforeClose = {
+  before_close_normal: (resolve) => {
+    Modal.confirm({
+      title: '确定要关闭这一页吗',
+      onOk: () => {
+        resolve(true)
+      },
+      onCancel: () => {
+        resolve(false)
+      }
+    })
+  }
+}
+
+export default beforeClose

src/router/routers.js

@@ -8,6 +8,7 @@ import parentView from '@/components/parent-view'
  *  notCache: (false) 设为true后页面不会缓存
  *  access: (null) 可访问该页面的权限数组，当前路由设置的权限会影响子路由
  *  icon: (-) 该页面在左侧菜单、面包屑和标签导航处显示的图标，如果是自定义图标，需要在图标名称前加下划线'_'
+ *  beforeCloseName: (-) 设置该字段，则在关闭当前tab页时会去'@/router/before-close.js'里寻找该字段名对应的方法，作为关闭前的钩子函数
  * }
  */
 
@@ -213,7 +214,8 @@ export default [
         name: 'tools_methods_page',
         meta: {
           icon: 'ios-hammer',
-          title: '工具方法'
+          title: '工具方法',
+          beforeCloseName: 'before_close_normal'
         },
         component: () => import('@/view/tools-methods/tools-methods.vue')
       }
@@ -303,7 +305,8 @@ export default [
         meta: {
           icon: 'md-flower',
           title: '动态路由',
-          notCache: true
+          notCache: true,
+          beforeCloseName: 'before_close_normal'
         },
         component: () => import('@/view/argu-page/params.vue')
       },

src/store/module/app.js

@@ -1,5 +1,25 @@
-import { getBreadCrumbList, setTagNavListInLocalstorage, getMenuByRouter, getTagNavListFromLocalstorage, getHomeRoute, routeHasExist } from '@/libs/util'
+import {
+  getBreadCrumbList,
+  setTagNavListInLocalstorage,
+  getMenuByRouter,
+  getTagNavListFromLocalstorage,
+  getHomeRoute,
+  getNextRoute,
+  routeHasExist,
+  routeEqual
+} from '@/libs/util'
+import beforeClose from '@/router/before-close'
+import router from '@/router'
 import routers from '@/router/routers'
+
+const closePage = (state, route) => {
+  const nextRoute = getNextRoute(state.tagNavList, route)
+  state.tagNavList = state.tagNavList.filter(item => {
+    return !routeEqual(item, route)
+  })
+  router.push(nextRoute)
+}
+
 export default {
   state: {
     breadCrumbList: [],
@@ -20,6 +40,20 @@ export default {
         setTagNavListInLocalstorage([...list])
       } else state.tagNavList = getTagNavListFromLocalstorage()
     },
+    closeTag (state, route) {
+      let tag = state.tagNavList.filter(item => routeEqual(item, route))
+      route = tag[0] ? tag[0] : null
+      if (!route) return
+      if (route.meta && route.meta.beforeCloseName && route.meta.beforeCloseName in beforeClose) {
+        new Promise(beforeClose[route.meta.beforeCloseName]).then(close => {
+          if (close) {
+            closePage(state, route)
+          }
+        })
+      } else {
+        closePage(state, route)
+      }
+    },
     addTag (state, { route, type = 'unshift' }) {
       if (!routeHasExist(state.tagNavList, route)) {
         if (type === 'push') state.tagNavList.push(route)

src/view/tools-methods/tools-methods.vue

@@ -20,6 +20,16 @@
         </i-col>
       </Row>
     </Card>
+    <Card shadow style="margin-top: 10px;">
+      <Row>
+        <i-col span="4">
+          <Button @click="handleCloseTag">关闭工具方法页</Button>
+        </i-col>
+        <i-col span="20">
+          <p>动态路由，添加query</p>
+        </i-col>
+      </Row>
+    </Card>
   </div>
 </template>
 
@@ -29,7 +39,8 @@ export default {
   name: 'tools_methods_page',
   methods: {
     ...mapMutations([
-      'addTag'
+      'addTag',
+      'closeTag'
     ]),
     createTagParams () {
       const id = parseInt(Math.random() * 100000)
@@ -56,6 +67,11 @@ export default {
         }
       }
       this.$router.push(route)
+    },
+    handleCloseTag () {
+      this.closeTag({
+        name: 'tools_methods_page'
+      })
     }
   }
 }