element的tab页刷新页面保存当前tab页面状态

element的tab页刷新页面保存当前tab页面状态

做项目的时候遇到一个的问题，element-ui中Tabs 组件提供了选项卡功能，默认选中第一个标签页，在标签页较多的情况下，每次刷新页面都会回到默认页，这样就得来回点很麻烦。。。

解决这个问题就是需要在本地存储，sessionStorage或者localStorage都可以！

《方法一》

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户" name="first">用户管理</el-tab-pane>
    <el-tab-pane label="配置" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色" name="third">角色管理</el-tab-pane>
  </el-tabs>
</template>
<script>
  export default {
    data() {
      return {
        // 默认显示first页面
        activeName: 'first'
      };
    },
   mounted(){
     let name = sessionStorage.getItem('currentTab') 
     // 判断是否存在currentTab，即tab页之前是否被点击切换到别的页面
     if(name){
       this.activeName = name
      }
    },
    methods: {
      handleClick(tab, event) {
      // 点击tab后触发事件，修改显示页面，将状态保存在sessionStorage里面
       sessionStorage.setItem('currentTab', tab.name)
      }
    }
  };
</script>

《方法二》

methods: {
    getLocket() {
      if (localStorage.getItem("report") !== null) {
        this.activeName = localStorage.getItem("report");
      }
    },
    handleClick(tab, event) {
      localStorage.setItem("report", tab.name);
    },
   }
  created() {
    this.getLocket();
}

以上两种方法都可以实现刷新页面保存tab状态了