标签页切换触发接口调用的核心是监听路由路径或激活标签状态变化,在watch回调中执行请求,需确保数据响应式、逻辑按需区分、异步请求防竞态。

标签页切换触发接口调用,核心是监听路由路径(route.path)或标签激活状态(如 activeTab)的变化,再在 watch 回调中执行对应接口请求。关键在于数据源要响应式、回调逻辑要按需区分、异步请求要防竞态。
监听路由 path 实现页面级标签切换
使用 useRoute() 获取的 route 是响应式对象,route.path 是字符串类型,变化即触发,无需 deep 选项:
- 在
<script setup></script>中导入并监听:import { useRoute, watch } from 'vue'<br>const route = useRoute()<br>watch(() => route.path, (toPath) => {<br> if (toPath === '/user/list') api.getUserList()<br> else if (toPath === '/order/detail') api.getOrderDetail()<br>}) - 适合单页应用中“菜单导航 → 不同视图”的场景,每个路径对应一个独立接口,逻辑清晰、无嵌套判断负担
监听本地 activeTab 实现组件内标签切换
当标签页在同一个组件内切换(如 el-tabs 或自定义 tab 切换),用 ref 管理当前激活项,watch 监听其变化:

