element-plus的el-tabs切换后，刷新浏览器状态丢失

原因：当浏览器刷新后，v-model绑定的数据也会重置，所以选中的状态会丢失

解决办法

方法一

切换tab会造成路由切换的情况：可以取得路由的name，若路由的name为空，则说明没有点击过。就使用||设置一个默认值。若不为空1，则直接取到name

<template>
   <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="User" name="first">User</el-tab-pane>
    <el-tab-pane label="Config" name="second">Config</el-tab-pane>

</template>


<script lang="ts" setup>
import {ref, reactive} from "vue"
import { useRouter ,useRoute} from "vue-router"

const router = useRouter()
const route = useRoute()


//tab栏选中的
const activeName = ref(route.name||'first') //若没有点击过，就默认展示第一个

const handleClick = (tab: TabsPaneContext) => {
router.push({
  name: tab.paneName as string
})

}

</script>

方法二

没有使用路由，切换tab只是内容的渲染。

可以把选中状态储存到sessionStorage本地。