vue3+element Plus使用el-tabs标签页，页面刷新不会到默认页(1)

当我们使用el-tabs标签页，在页面刷新后就会回到默认的那一页，如果我们想让页面停留在当前页，可以使用localStorage存储当前页的值

1. 引入el-tabs

<el-tabs
    v-model="activeName"
    type="border-card"
    class="demo-tabs"
    @tab-click="handleClick"
>
   <el-tab-pane label="我的列表" name="first">
       内容111
   </el-tab-pane>
   <el-tab-pane label="收藏列表" name="second">
       内容2222
   </el-tab-pane>
</el-tabs>

2. 在方法中设置localstorage

//tab 被选中时触发的方法
const handleClick = (tab: any) => {
  activeName.value = tab.props.name;
  window.localStorage.setItem("activeTab ", activeName.value);
};

//页面加载时先判断有没有localstorage，没有的话取默认值
onMounted(() => {
  activeName.value = window.localStorage.getItem("activeTab ") || "first";
});

3. 效果图