跨项目tab标签页的实现

注意：由于此处项目用的是local存储（未使用vuex存储原因：跨项目）

1.在template中添加el-tab组件

2.把所有点击的标签push到一个数组上 ，在tab组件上进行v-for循环展示

3.在左侧菜单栏中绑定的点击事件中存储对应点击的标签到数组再把数组整体存放到loacl

问题：标签高光取本地存储的值，每次点击标签都要重新存储

问题：在存放到数组之后存储本地之前进行数组去重

问题：在添加到数组之前先进行节点查询（父子节点嵌套太深）

    //查找子节点
    findChildren(data, index) {
      for (let i = 0; i < data.length; i++) {
        if (data[i].index === index) {
          return data[i];
        }
        if (data[i].children) {
          const result = this.findChildren(data[i].children, index);
          if (result) {
            return result;
          }
        }
      }
      return null;
    },

4.移除标签情况判断

根据数组findIndex返回当前点击的标签的数组索引，通过splice方法删除

情况：判断index和数组长度&&光标的展示需要在每次操作里面重新存储

光标的显示是根据本地的存储

a. 当前索引等于0的情况（数组长度为0，不为0的情况就是第0位）

分为两种情况：跳转首页/不跳转首页
1.跳转首页：数组长度为0并且返回下标索引为0
2.不跳转首页：数组长度不为0并且返回下标索引为0
要存储：背景高亮和标签数组

b.当前索引等于1的情况

c.当前索引大于1的情况

以上情况判断完之后：要对数组进行操作之后再重新在本地进行存储

5.keepalive使用---vue3

问题：切换标签保留历史操作是项目正常需求

关闭标签从侧边栏打开依旧保留了历史操作

incoude的使用方法

项目中incoude绑定的是一个数组：以数组包含字符串的方式，字符串是项目目中路由对应的“name”