tabs标签页的使用——el-tabs动态组件的使用、sessionStorage.getItem、sessionStorage.setItem、goBack返回

本文链接：https://blog.youkuaiyun.com/weixin_44867717/article/details/137136524

博客介绍了Vue中tabs标签页的使用，涉及el-tabs动态组件，还提及sessionStorage的getItem和setItem方法以及goBack返回功能。同时给出主页面、公共样式、引用的组件数组、主页和详情页的相关文件路径。

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

tabs标签页的使用——el-tabs动态组件的使用、sessionStorage.getItem、sessionStorage.setItem、goBack返回

效果

在这里插入图片描述

点击打印的数据

在这里插入图片描述

1、主页面

index.vue

<!--
 * @Author: author 20230904@163.com
 * @Date: 2023-08-25 19:56:45
 * @LastEditors: author 20230904@163.com
 * @LastEditTime: 2023-08-25 19:56:45
 * @FilePath: \sgtech-prj-webapp\src\app\science\views\comquart\variousUnits\comInplement.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="main-content">
    <el-tabs v-model="manageZnIndex" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane
        v-for="item in tabPanes"
        :key="item.label[1]"
        :label="item.label[0]"
        :name="item.label[1]"
      >
        <component
          :is="item.component"
          v-if="manageZnIndex === item.label[1]"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
  import options from './options'
  const tabPanes = computed(() => options.filter((item) => item.hidden))
  const manageZnIndex = ref(
    sessionStorage.getItem('manageZnIndex') || tabPanes.value[0]?.label[1]
  )
  const handleClick = (tab) => {
    console.log(88, tab)
    sessionStorage.setItem('manageZnIndex', tab.props.name)
  }
</script>
<style lang="scss" scoped>
  @import url('@/views/style/main.scss');
</style>

2、公共样式

src\app\science\views\style\main.scss

.box-main {
   
   
  padding: 0px;
  background: #f8f8f8;
}
.p-top78 {
   
   
  padding: 78px 0 0;
}
.p-top58 {
   
   
  padding: 58px 0 0;
}
.bg-white {
   
   
  min-height: 80vh;
  padding: 20px 30px;
  background: #fff;
}
.page-header {
   
   
  padding-left: 30px;
  background: #fff;
}
.item-content{
   
   
  width: 100%;
}
.item-relevance {
   
   
  display: flex;
  justify-content: flex-start;
  margin: 16px 0px;
 
}
.form-content {
   
   
  width: 100%;
  margin: 16px 0px 0;
}
.page-title