在线演示
上面的演示是一个真实的 Vue 3 应用——有自己的 Vue Router、自己的标签、自己的页面栈——运行在隔离的 iframe 里。可以从标题栏在新窗口打开它。
为什么用 iframe？
vue-stack-tabs 把每个标签栈绑定到浏览器 URL，如果直接跑在文档站内，就会和 VitePress 争用同一个 router。所以演示放在独立应用里（docs/.vitepress/demo-app），再以 iframe 嵌到文档中；在新窗口打开它，就能一边切标签一边观察 URL、__tab 参数和浏览器历史的变化。
建议的体验顺序
- 打开标签 —— 点「报表列表」，再点某一行的「查看详情」：你是在同一个标签内前进，标签栏不会变多。
- 带结果后退 —— 在详情页点「后退并回传」：列表页通过
props._back收到这个值。 - 缓存隔离 —— 点「打开 3 个报表标签」：三个标签指向同一路由的不同参数，各自持有独立缓存。
- 表单状态 —— 打开「表单」输入内容，切到别的标签再切回来，输入仍在。
- 滚动记忆 —— 打开「长列表」滚到中段，切走再切回，位置被恢复。
- iframe 标签 —— 点「打开 iframe 标签」：iframe 内的页面可以通过
postMessage反过来请求父窗口打开新标签。 - 页签级加载遮罩 —— 点「打开 Loading 演示」并触发模拟请求：遮罩只覆盖该标签，此时切到别的标签仍然可以正常操作。
每个按钮覆盖了什么
| 能力 | 怎么看 | 对应 API |
|---|---|---|
| 打开 / 切换 / 关闭标签 | 控制台按钮，以及标签栏右键菜单 | useTabActions |
| 标签栏拖拽排序 | 拖动一个标签到另一个位置 | moveTab |
| 标签内前进 / 后退 | 报表列表 → 详情 → 后退（带回传参数） | useTabRouter |
| 每标签独立缓存 | 三个指向同一路由的报表标签 | 每页独立的 keep-alive 缓存 |
| 表单状态保持 | 表单标签输入后切走再回来 | keep-alive 缓存 |
| 滚动位置记忆 | 长列表滚动后切走再回来 | addScrollTarget |
| iframe 标签与通信 | iframe 标签内的按钮 | IFrame、postOpenTab |
| 页签级加载遮罩 | 控制台「打开 Loading 演示」，点「模拟 2 秒加载」 | useTabLoading |
| 刷新单个 / 全部标签 | 控制台的「刷新当前 / 刷新全部」 | refreshTab、refreshAllTabs |
| 会话恢复 | 刷新演示页，恢复上次激活的标签及其页面栈 | sessionPrefix、sessionStorage |