0 环境

• 系统环境：win10

1 问题

现在有4个标签页 当我从右往左(当前页)删除tab 没有任何异常 但当我删除用户管理 就会有报错提示 如图

4个标签页

从右往左(当前页)删除tab

删除中间的标签页

具体报错

2 解决

参考文章

一种在路由push是加异常处理 第二种修改移除标签方法里代码逻辑

方案

1 路由push异常处理

// 确定没有其他的异常 可以这么玩 当然不建议这么做
this.$router.push(url).catch(()=>{});

2 修改移除标签方法里代码逻辑

仔细看就会发现 当我们点击进入某个标签页 在删除当前页 就不会报错 找到移除tab的方法 删除if (activeName === targetName)这个判断 在调试 ok 收工

removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;

      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
              // console.log("activeName===>",activeName)
              // this.editableTabsValue = activeName;
            }
          }
        });
      }

      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter((tab) => tab.name !== targetName);

      // this.$router.push({name: activeName}).catch(()=>{});
      this.$router.push({ name: activeName });
    }