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

欢喜~999

已于 2023-08-03 17:34:48 修改

阅读量1.6k

点赞数

文章标签： vue.js javascript 前端 elementui

于 2023-07-27 14:34:27 首次发布

本文链接：https://blog.youkuaiyun.com/m0_52761651/article/details/131959450

版权

当使用el-tabs标签页时，页面刷新会重置到默认页。为保持当前页，可以在tab-click事件中存储activeName到localStorage，并在页面加载时检查localStorage以恢复先前的值。onMounted生命周期钩子用于设置初始值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当我们使用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. 效果图