vue element-ui 侧边栏 和tabs 标签卡，绑定关联

vue element-ui 侧边栏 和tabs 标签卡，绑定关联

实现效果：

思路：

点击侧边栏 添加 tabs 标签函数 ： tab_click
点击 tabs 标签 返回： tab_click
关闭 tabs 标签函数： removeTab
1. 添加时候判断，tabs标签里是否已经 包含此标签，有就跳转，无就添加跳转
2. 移除的时候，tabs -1 选中状态也回到上一个 tabs 标签

3.解决刷新重置：
	tabs 标签卡重置，使用  sessionStorage 存储 tabs列表 和 选中状态。
	刷新的时候后，判断本地有没有  sessionStorage.sessTabs  和 sessionStorage.sessTabsValue ，有就给其赋值，保持刷新还存在。
	 	sessionStorage.sessTabs = JSON.stringify(this.editableTabs);
	    sessionStorage.sessTabsValue = JSON.stringify(this.editableTabsValue);
4.用户退出登录时候，清空 tabs列表 和 选中状态，
5.

1. 添加侧边栏

for循环，渲染出页面

 <el-container>
        <!-- 侧边栏 -->
        <el-aside :width="isCollapse ? '60px' : ' 180px'">
          <!-- :default-active="active" -->

          <el-menu
            class="el-menu-vertical-demo"
            background-color="#d3dce6"
            :default-active="active"
            router
            :collapse="isCollapse"
            :collapse-transition="false"
          >
            <component
              v-for="value in leftMenu.navList"
              :key="value.title + value.url"
              :index="value.url"
              :is="
                value.children && value.children.length > 0
                  ? 'el-submenu'
                  : 'el-menu-item'
              "
              @click="toTab(value.title, value.url)"
            >
              <!-- 当有子元素时，隐藏本条父元素的渲染 -->
              <template
                v-if="value.children == null || value.children.length < 0"
              >
                <img :src="value.icon" />
                <span>{{ value.title }}</span>
              </template>
              <!-- //子循环 -->
              <template v-if="value.children && value.children.length > 0">
                <template slot="title"
                  ><img :src="value.icon" />
                  <span>{{ value.title }} </span>
                </template>
                <el-menu-item
                  v-for="v in value.children"
                  :key="v.title + v.url"
                  :index="v.url"
                  @click="toTab(v.title, v.url)"
                  style="font-size: 12px"
                >
                  <img :src="v.icon" />
                  <span slot="title">{{ v.title }}</span>
                </el-menu-item>
              </template>
            </component>
          </el-menu>
        </el-aside>
        
        <!-- 上边标签 （与侧边栏关联） -->
        <el-container>
          <el-main>
            <el-tabs
              v-model="editableTabsValue"
              type="border-card"
              closable
              @tab-remove="removeTab"
              @tab-click="tab_click"
            >
              <el-tab-pane
                v-for="item in editableTabs"
                :key="item.name"
                :label="item.title"
                :name="item.name"
                :disabled="item.name == '0'"
              >
                <label
                  slot="label"
                  :class="item.icon"
                  v-if="item.name === '0'"
                  @click="xxx()"
                ></label>
                <label slot="label" v-else>{{ item.title }}</label>
              </el-tab-pane>
            </el-tabs>

            <!-- 导航栏 -->
           <router-view />  
          </el-main>
          <el-footer>联系电话：0101-****-****</el-footer>
        </el-container>
      </el-container>

准备工作,data

 data() {
    return {
     
      // tab栏
      isCollapse: false,
      editableTabsValue: "1", //选中状态的 name
      editableTabs: [ //默认存在的 tabs 
        {
          icon: "el-icon-s-fold",
          path: "#",
          title: "折叠",
          name: "0",
        },
        {
          icon: "el-icon-suitcase",
          path: "homePage",
          title: "首页",
          name: "1",
        },
      ],
      // 侧边栏
      active: "",
      leftMenu: {
        isCollapse: false,
        //navList: [],
        navList: [
           {
             icon: "el-icon-suitcase",
             path: "homePage",
             title: "首页",
           },
           {
            icon: require("../assets/images/cun.png"),
            url: "village",
             title: "村庄",
           },
           {
             // icon: "el-icon-office-building",
             icon: require("../assets/images/mans.png"),
             url: "person",
             title: "人口",
           },
           {
             // icon: "el-icon-office-building",
             icon: require("../assets/images/mans.png"),
             url: "map",
             title: "地图",
           }
         ],
      },
    };
  },

2. 添加tabs 标签

3. 相关联起来

3.1 点击侧边栏 添加tabs 标签
3.1.1点击侧边栏 添加tabs 标签

 //添加 tabs 标签页 ,传递的 name 是title
    toTab(name, url) {
      this.active = url;
      // console.log(name, url);
      //添加之前需要 判断是否已经包含，
      let isHave = false;
      for (let i = 0; i < this.editableTabs.length; i++) {
        if (this.editableTabs[i].title == name) {
          //存在，包含
          isHave = true;
          this.editableTabsValue = this.editableTabs[i].name;
        }
      }
      if (isHave == false) {
        this.editableTabs.push({
          title: name,
          name: name,
          content: name + url, //用于测试，后边可以删除
          path: url,
        });
        this.editableTabsValue =
          this.editableTabs[this.editableTabs.length - 1].name;
      }
      //本地存储值
      sessionStorage.sessTabs = JSON.stringify(this.editableTabs);
      sessionStorage.sessTabsValue = JSON.stringify(this.editableTabsValue);
      // console.log(sessionStorage.sessTabs);
      // console.log(sessionStorage.sessTabsValue);
    },

3.1.2 移除tabs 标签

    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]; //下一个 next 打开的页面，有就下一个，没就上一个
            if (nextTab) {
              activeName = nextTab.name;
              this.active = nextTab.path;
              this.$router.push(nextTab.path);
            }
          }
        });
      }
      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter((tab) => tab.name !== targetName);
      //本地存储值
      sessionStorage.sessTabs = JSON.stringify(this.editableTabs);
      sessionStorage.sessTabsValue = JSON.stringify(this.editableTabsValue);
    },

3.2 点击 tabs 标签，跳转相应路由，选中状态

tab_click(tab) {
      let url = this.editableTabs[tab.index].path;
      if (this.$router.currentRoute.name !== url) {
        this.active = url;
        this.$router.push(url);
      }
      //存储选中状态
      this.toTab(this.editableTabs[tab.index].title, url);
    },
	3.3

4. 解决刷新时

，tabs 标签卡重置，使用 sessionStorage 存储 tabs列表 和 选中状态。
sessionStorage.sessTabs = JSON.stringify(this.editableTabs);
sessionStorage.sessTabsValue = JSON.stringify(this.editableTabsValue);