11.动态标签页的一些优化和bug的解决

动态标签页有一些需要优化的地方和bug

1.解决删除标签页,内容不会替换为上一个标签页

复制代码
    removeTab(targetName) {
      if ( targetName === 'Index') {
        console.log("首页不能被删除")
        return;
      }
      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;
            }
//在删除方法里加上这一个路由的切换,当删除一个标签,就会路由到前一个标签
            this.$router.push({name: nextTab.name});
          }
        });
      }

      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter(tab => tab.name !== targetName);
    },
    tabClick(target) {
      this.$router.push({name: target.name});
    }
  }

2.用户使用网址进入,没有标签

当用户使用网址进入时,可以看到页面,但是没有对应的标签

因为我这里是一个嵌套页面,归根结底还是app.vue

所以使用监听器

复制代码
export default {
  name: "App",
  watch:{
    $route(to,from){
      if (to.path != '/login' && to.path != '/sys/Index' && to.path != '/'){
        console.log("to")
        console.log(to);
        let obj = {
          name: to.name,
          title: to.meta.title,
        }
        this.$store.commit('addTab', obj);
      }
    }
  }

3.用户退出,标签页不会被清空

调用方法将其清空

复制代码
        REMOVE_TOKEN: (state) => {
            state.token = ''
            localStorage.removeItem("token")
            state.menuList = [];
            state.authoritys = [];
            state.validation = false;
            state.editableTabsValue = 'Index';
            state.editableTabs = [{
                title: '首页',
                name: 'Index'
            }];
        }

4.首页不能被删除

复制代码
加一个判断   
 removeTab(targetName) {
      if ( targetName === 'Index') {
        console.log("首页不能被删除")
        return;
      }
      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;
            }
            this.$router.push({name: nextTab.name});
          }
        });
      }

5.出现两个首页标签

这是因为监听器没有判断目标网页是不是首页

复制代码
  watch:{
    $route(to,from){
      if (to.path != '/login' && to.path != '/sys/Index' && to.path != '/'){
        console.log("to")
        console.log(to);
        let obj = {
          name: to.name,
          title: to.meta.title,
        }
        this.$store.commit('addTab', obj);
      }
    }
  }

6.出现一个空白的标签

同上

相关推荐
boonya1 天前
国内外常用的免费BUG管理工具选型
bug
10岁的博客1 天前
Bug排查日记:高效记录与解决之道
bug
彭刷子2 天前
【Bug】Nexus无法正常启动的五种解决方法
bug·nexus
黑客飓风2 天前
从基础功能到自主决策, Agent 开发进阶路怎么走?
面试·log4j·bug
mahuifa2 天前
C++(Qt)软件调试---bug排查记录(36)
c++·bug·软件调试
Kyln.Wu2 天前
【python实用小脚本-205】[HR揭秘]手工党逐行查Bug的终结者|Python版代码质量“CT机”加速器(建议收藏)
开发语言·python·bug
2501_930104042 天前
Bug 排查日记:打造高效问题定位与解决的技术秘籍
bug
weixin_377634842 天前
【YOLO】数据增强bug
yolo·bug
伍哥的传说2 天前
还在为第三方包 bug 头疼?patch-package 让你轻松打补丁!
bug·开发效率·前端工具·第三方包bug·前端开发痛点·npm包修复·依赖包定制
黑客飓风2 天前
Bug排查日记:从崩溃到修复的实战记录
log4j·bug