After switching the el-tabs of element-plus, the status of refreshing the browser is lost

Reason: When the browser is refreshed, the data bound by v-model will also be reset, so the selected state will be lost

Solution

method one

Switching tabs will cause route switching: the name of the route can be obtained. If the name of the route is empty, it means that it has not been clicked. Just use || to set a default value. If it is not empty 1, then get the name directly

<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>

Method Two

No routing is used, switching tabs is just rendering of content.

The selected state can be stored locally in sessionStorage.