gold-vue/src/views/audit/audit.vue

<template>
  <div>
    <!-- 这里放置标签切换的按钮 -->
    <el-button-group>
      <!-- 切换后状态显示 primary 样式否则是默认样式 -->
      <el-button
          :type="activeTab === 'rechargeAudit' ? 'primary' : 'default'"
          @click="goRechargeAudit"
      >
        充值审核
      </el-button>
      <el-button
          :type="activeTab === 'refundAudit' ? 'primary' : 'default'"
          @click="goRefundAudit"
      >
        退款审核
      </el-button>
    </el-button-group>
    <!-- 渲染子路由组件 -->
    <router-view></router-view>
  </div>
</template>

<script setup >
import {onMounted, ref, watch} from 'vue';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();// 获取路由实例
const route = useRoute();// 获取当前路由信息
// 定义响应式变量 activeTab 来跟踪当前激活的标签
const activeTab = ref(route.name === 'rechargeAudit' ? 'rechargeAudit' : 'refundAudit');
//也就是说如果当前在clientCountBalance页面，那么就是balance，否则默认情况都展示detail页面
//此时获取到的路由信息是clientCountDetail，所以默认是detail


const goRechargeAudit = () => {
  // 点击按钮时更新 activeTab 为 detail
  activeTab.value = 'rechargeAudit';
  router.push({ name: 'rechargeAudit' });
};

const goRefundAudit = () => {
  // 点击按钮时更新 activeTab 为balance
  activeTab.value = 'refundAudit';
  router.push({ name: 'refundAudit' });
};

// 监听路由变化，更新 activeTab
watch(() => route.name, (newName) => {
  if (newName === 'rechargeAudit') {
    activeTab.value = 'rechargeAudit';
  } else if (newName === 'refundAudit') {
    activeTab.value = 'refundAudit';
  }});

// 当进入父路由时，默认跳转到金币明细页面
// if (route.name === 'usergold') {
//   router.push({ name: 'clientCountDetail' });
// }


onMounted(async function () {
  console.log("@@@@@@@@@@@@",route.name)
});

</script>