<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>
el-tags 刷新后页面导航栏不对
最新推荐文章于 2024-08-23 14:49:37 发布