Live Demo
The demo above is a real Vue 3 application — its own Vue Router, its own tabs, its own page stack — running in an isolated iframe. Use the title bar to open it in a new window.
Why an iframe?
vue-stack-tabs binds every tab stack to the browser URL, so running it inside the documentation would fight VitePress for the same router. The demo therefore lives in its own app (docs/.vitepress/demo-app) and is embedded here; open it standalone to watch the URL, the __tab query and the history change as you switch tabs.
What to try
- Open a tab — click 报表列表 / Reports, then 查看详情 / View detail on a row: you move forward inside the same tab, the tab bar does not grow.
- Go back with a result — on the detail page press 后退并回传: the list receives the value through
props._back. - Cache isolation — click 打开 3 个报表标签: three tabs point at the same route with different params, each with its own cache.
- Form state — open 表单 / Form, type something, switch tabs and come back: your input is still there.
- Scroll memory — open 长列表 / Long list, scroll to the middle, switch away and back: the position is restored.
- iframe tab — click 打开 iframe 标签: the page inside the iframe can ask the parent to open a new tab via
postMessage. - Page loading overlay — click Open the loading demo and run the simulated request: the overlay covers that tab only; switch tabs while it runs and the others stay usable.
What each control covers
| Capability | How to see it | API |
|---|---|---|
| Open / switch / close tabs | Console buttons and right-click menu on the tab bar | useTabActions |
| Tab bar drag & drop reordering | Drag one tab over another | moveTab |
| Forward / backward inside a tab | Reports → detail → back (with _back params) | useTabRouter |
| Independent cache per tab | Three report tabs on the same route | per-page keep-alive cache |
| Form state preserved | Form tab, switch away and back | keep-alive caching |
| Scroll position memory | Long list, switch away and back | addScrollTarget |
| iframe tabs + postMessage bridge | iframe tab, then its in-page button | IFrame, postOpenTab |
| Page loading overlay | Console: Open the loading demo, then simulate a request | useTabLoading |
| Refresh single / all tabs | Console: 刷新当前 / 刷新全部 | refreshTab, refreshAllTabs |
| Session restore | Reload the demo page — previously open tabs come back | sessionPrefix, sessionStorage |