【已解决】Ant Design Vue Tabs 刷新空白问题：destroyInactiveTabPane + 权限控制的正确姿势

一、问题背景

在使用 Ant Design Vue + Vue3 + TypeScript 开发工单管理模块时，页面结构如下：

使用
<a-tabs> 实现多个 Tab 页

每个 Tab 对应一个业务模块

通过权限指令（如
v-perm）控制 Tab 是否展示

开启
destroyInactiveTabPane 以优化性能

结果却遇到了一个诡异问题：

页面刷新时，当前 Tab 内容为空白
切换到其他 Tab 后，再切回来又能正常显示

二、问题复现代码

<a-tabs v-model:activeKey="activeKey" :destroyInactiveTabPane="true">
  <a-tab-pane key="1" tab="报修管理" v-perm="'repair:order'">
    <RepairReportingManagement />
  </a-tab-pane>
  <a-tab-pane key="2" tab="工单管理" v-perm="'work:order'">
    <OrderManagement />
  </a-tab-pane>
</a-tabs>