vue3中使用el-tabs实现当前页面下，点击组件页面跳转功能

具体代码实现及说明

使用v-model，@tab-click，v-if和sessionStorage

//index.vue
//template
<el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="VPN列表" name="first" />
        <el-tab-pane label="拨号记录" name="second" />
        <el-tab-pane label="历史订单" name="third" />
</el-tabs>
//组件
<VpnForm v-if="activeName=='first'" />    //判断当前 activeName 是否为组件默认值
<CallRecord v-if="activeName=='second'" />
<HistoryOrder v-if="activeName=='third'" />

//script
import { ref } from "vue";
import VpnForm from "./components/vpnForm/index.vue";
import CallRecord from "./components/callRecord/index.vue";
import HistoryOrder from "./components/historyOrder/index.vue";

export default {
    components: { VpnForm, CallRecord, HistoryOrder },
    setup(){
        let activeName = ref('first')    //定义 activeName
        
        //将 activeName 存入 sessionStorage
        const handleClick = () => {
            sessionStorage.setItem('_crmCurrentTab', activeName.value)
        }
        //将当前 activeName 设置成已经保存的 sessionStorage
        const changeTag = () => {
          const name = sessionStorage.getItem('_crmCurrentTab');
          if (name) {
            activeName.value = name;
          }
        }
        
        return{
            activeName
        }
    }
}

双向绑定activeName使其值改变，将改变后的activeName存入sessionStorage中。
通过v-if判断activeName值是否为当前组件默认值。
通过sessionStorage使得当前页面刷新能保持在当前组件中。