Vben Admin ferme la page de l'onglet des onglets spécifiés

Scénario du projet :

使用Lors du développement de Vben Admin, le nouvel ajout est généralement un tiroir ou une boîte de modèle. Lorsque nous avons un scénario de demande, une nouvelle page est ouverte. Une fois l'ajout terminé, les onglets ouverts correspondants doivent être fermés.

 

---

Description du problème

Lorsque l'onglet spécifié à la fermeture est introuvable dans le document, nous ne pouvons regarder que le code source du framework : sous le fichier store/modules/multipleTab.ts, nous pouvons voir les méthodes correspondant aux différents onglets. Il suffit de trouver la méthode pour fermer l'onglet spécifié. Voici comment tabuler la page

// 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);
          }
        }
      }
    },

---

Utilisation des pages :

1. On voit que le fichier exporte la fonction useMultipleTabWithOutStore() à la fin, il faut donc l'introduire sur la page

2. Fermez la balise spécifiée après avoir appelé avec succès l'interface de sauvegarde des données.

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

})