利用vuex关闭当前tab页签

在这里插入图片描述

在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
    })

在这里插入图片描述

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值