el-tab 如何点击不同标签触发不同函数

介绍
el-tab本身的功能是点击之后切换不同页，但是我希望点击不同标签就触发不同页

代码实现

<template>
  <el-tabs
    v-model="activeName"
    type="card"
    class="demo-tabs"
    @tab-click="handleClick"
  >
    <el-tab-pane label="User" name="User">User</el-tab-pane>
    <el-tab-pane label="Config" name="Config">Config</el-tab-pane>
  </el-tabs>
</template>
 
 
<script>
export default{
    data() {
        return {
            clickedTabs: {//这里是希望函数只被调用一次
                'User': false,
                'Config': false,
            },
         }
    },
    methods: {
        function1(){console.log('function1 was called')},
        function2(){console.log('function2 was called')},
        handleClick(tab, event) {
            if (!this.clickedTabs[tab.props.name]) {//这里是希望函数只被调用一次
                console.log('Clicked tab name: ' + tab.props.label);
                this.clickedTabs[tab.props.name] = true;//这里是希望函数只被调用一次
                // 根据tab的名字执行相应的操作
                switch (tab.props.name) {
                   case "User":
                        console.log('function1 BEGIN');
                        this.function1();
                        break;
                   case "Config":
                        console.log('function2 BEGIN');
                        this.function2();
                        break;
                }
            } 
            else {
                console.log(tab.props.name + ' tab was already clicked.');
            }
        },
    }
}
</script>

handleClick里面通过if来使得点击标签调用函数只被调用一次，如果不需要这个操作可以把相关代码注释掉，只留下switch函数。