点击tab刷新页面_element的tab页刷新页面保存当前tab状态

pc端项目大致做完了， 测试人员在测试的时候提出让tab页在浏览器刷新之后回到当前操作的页面，本来想回应问题不大，不用这么改吧？系统里面这么多tab，难道都要添加？结果产品消息就发来了，觉得这个建议很有道理，就改下吧，辛苦辛苦！那，我就改下呗。。。

原本以为element官网会有什么属性用来保存tab页的状态，后来发现没有，那就用sessionStorage来实现吧。

 <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-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</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
      }
    },
    beforeRouteLeave(to, from, next){
      // 在离开此路由之后清除保存的状态（我的需求是只需要在当前tab页操作刷新保存状态，路由切换之后不需要保存）
      // 根据个人需求决定清除的时间
       sessionStorage.removeItem('currentTab')
       next()
    },
    methods: {
      handleClick(tab, event) {
      // 点击tab后触发事件，修改显示页面，将状态保存在sessionStorage里面
       sessionStorage.setItem('currentTab', tab.name)
      }
    }
  };
</script>

这样就可以实现刷新页面保存tab状态了，不喜勿喷，本人是前端小白，有更好地建议可以发我，感谢观看~