elementui移除tab报Avoided redundant navigation to current location: ***

最新推荐文章于 2024-02-02 17:27:05 发布

刺骨寒风刺

最新推荐文章于 2024-02-02 17:27:05 发布

阅读量376

点赞数

分类专栏： vue 前后端文章标签： vue

本文链接：https://blog.csdn.net/edtwar/article/details/117252596

版权

前后端同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

vue

9 篇文章 0 订阅

订阅专栏

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