Vben Admin 关闭指定的tabs标签页

项目场景：

使用Vben Admin开发时，一般新增是抽屉或者model框来操作，当我们有需求场景新增是新开一个页面，新增结束后需要关闭对应打开的tabs标签页

问题描述

关闭指定的标签页在文档中找不到时，我们只能看框架源码：在store/modules/multipleTab.ts文件下，我们能看到各种tabs标签页对应的方法，我们只需要找到关闭指定标签页的方法如下

// Close according to key
    //key 传入指定路径， router传入路由
    async closeTabByKey(key: string, router: Router) {
      const index = this.tabList.findIndex((item) => (item.fullPath || item.path) === key);
      if (index !== -1) {
        await this.closeTab(this.tabList[index], router);
        const { currentRoute, replace } = router;
        // 检查当前路由是否存在于tabList中
        const isActivated = this.tabList.findIndex((item) => {
          return item.fullPath === currentRoute.value.fullPath;
        });
        // 如果当前路由不存在于TabList中，尝试切换到其它路由
        if (isActivated === -1) {
          let pageIndex;
          if (index > 0) {
            pageIndex = index - 1;
          } else if (index < this.tabList.length - 1) {
            pageIndex = index + 1;
          } else {
            pageIndex = -1;
          }
          if (pageIndex >= 0) {
            const page = this.tabList[index - 1];
            const toTarget = getToTarget(page);
            await replace(toTarget);
          }
        }
      }
    },复制

页面使用：

1.我们能看到该文件最后export useMultipleTabWithOutStore()这个函数，则我们需要在页面引入

2.调用保存数据接口成功后关闭指定标签

  import { useMultipleTabStore } from '/@/store/modules/multipleTab';
  import { useRoute, useRouter } from 'vue-router';
 
 export default defineComponent({
    setup(_) {
      const route = useRoute();
      const router = useRouter();
      //关闭指定标签 引入tabs里面的方法
      const tabStore = useMultipleTabStore();
 
        //调用接口保存数据
        dictsSaveApi(passParams).then(async (res) => {
            if (res) {
                
              msg.success('提交成功！');
              //关闭指定标签
              const { fullPath } = route; //获取当前路径
              await tabStore.closeTabByKey(fullPath, router);
            }
          });
        
    }
 
})复制