在这里插入图片描述

在vuex的js文件中写如下方法:(如果没有vuex的js文件,可以自己写一个,参考另外一篇文章,讲解vuex的)

/**
     * @class closeNow
     * @description 关闭当前界面页签(如在工作项详情界面,点击删除按钮,关闭当前这个页签)
     * @param {Object} state vuex state
     * @param {Object} param { tagName: 要关闭的标签名字, vm: vue }
     */
    closeNow ({ state, commit, dispatch }, { tagName, vm }) {
      return new Promise(async resolve => {
        // 下个新的页面
        let newPage = state.opened[0]
        // 如果关闭的页面就是当前显示的页面
          // 去找一个新的页面
          let len = state.opened.length
          for (let i = 1; i < len; i++) {
            if (state.opened[i].name === tagName) {
              if (i < len - 1) {
                newPage = state.opened[i + 1]
              } else {
                newPage = state.opened[i - 1]
              }
              break
            }
          }
        // 找到这个页面在已经打开的数据里是第几个
        const index = state.opened.findIndex(page => page.name === tagName)
        if (index >= 0) {
          // 更新数据 删除关闭的页面
          state.opened.splice(index, 1)
          // 如果这个页面是缓存的页面 将其在缓存设置中删除
          commit('keepAliveRemove', tagName)
        }
        // 持久化
        await dispatch('opend2db')
        // 最后需要判断是否需要跳到首页
        // if (isCurrent) {
          const { name = '', params = {}, query = {} } = newPage
          let routerObj = {
            name,
            params,
            query
          }
          vm.$router.push(routerObj)
        // }
        // end
        resolve()
      })
    },

在当前界面,用逻辑判断,是否需要关闭当前tab页签,三步
第一步:
引入vuex

import { mapActions } from 'vuex'  /** 删除当前界面步骤 */

在这里插入图片描述

第二步:
在methods中,注入

/** 删除当前界面步骤 */
...mapActions('d2admin/page', ['closeNow']),

在这里插入图片描述

第三步: 删除方法中做逻辑判断

/** 删除当前界面步骤 */
const list = this.$store.state.d2admin.page.opened
list.find((v,index)=>{
  if(index>0 &&  v.path === this.$route.path.substring(0,this.$route.path.length-1)){
    this.closeNow({
      tagName: v.name,
      vm: this
    })

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐