vue3+element Plus使用el-tabs标签页解决页面刷新不回到默认页的问题
作者：欢喜~999
这篇文章主要介绍了vue3+element Plus使用el-tabs标签页页面刷新不回到默认页的操作方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
vue3+element Plus使用el-tabs标签页，页面刷新不会到默认页
当我们使用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. 效果图
vue3使用Element-plus Tabs 标签页的点击事件
<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 {
activeName: 'second'
};
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
//这样才能获取每个el-tab-pane的name属性
console.log(tab.props.name);
}
}
};
</script>注意：获取name属性需要tab.props.name
到此这篇关于vue3+element Plus使用el-tabs标签页解决页面刷新不回到默认页的问题的文章就介绍到这了,更多相关vue3 element Plus页面刷新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！