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

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

    1.  <template>
    2.   <el-tabs v-model="activeName" @tab-click="handleClick">
    3.     <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
    4.     <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    5.     <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    6.     <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
    7.   </el-tabs>
    8. </template>
    9. <script>
    10.   export default {
    11.     data() {
    12.       return {
    13.         // 默认显示first页面
    14.         activeName: 'first'
    15.       };
    16.     },
    17.    mounted(){
    18.      let name = sessionStorage.getItem('currentTab') 
    19.      // 判断是否存在currentTab，即tab页之前是否被点击切换到别的页面
    20.      if(name){
    21.        this.activeName = name
    22.       }
    23.     },
    24.     beforeRouteLeave(to, from, next){
    25.       // 在离开此路由之后清除保存的状态（我的需求是只需要在当前tab页操作刷新保存状态，路由切换之后不需要保存）
    26.       // 根据个人需求决定清除的时间
    27.        sessionStorage.removeItem('currentTab')
    28.        next()
    29.     },
    30.     methods: {
    31.       handleClick(tab, event) {
    32.       // 点击tab后触发事件，修改显示页面，将状态保存在sessionStorage里面
    33.        sessionStorage.setItem('currentTab', tab.name)
    34.       }
    35.     }
    36.   };
    37. </script>

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