gold-vue/src/views/consume/coinConsume.vue

<template>
  <div>
    <!-- 这里放置标签切换的按钮 -->
    <el-button-group>
    <!-- 切换后状态显示 primary 样式否则是默认样式 -->
      <el-button
        :type="activeTab === 'add' ? 'primary' : 'default'"
        @click="goToAdd"
      >
        新增消耗
      </el-button>
      <el-button
        :type="activeTab === 'detail' ? 'primary' : 'default'"
        @click="goToDetail"
      >
        金币消耗明细
      </el-button>
    </el-button-group>
    <!-- 渲染子路由组件 -->
    <router-view></router-view>
  </div>
</template>

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

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


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

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

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

// 当进入父路由时，默认跳转到新增消耗页面
if (route.name === 'coinConsume') {
  router.push({ name: 'addCoinConsume' });
}
</script>