路由级标签页
每个标签承载自己的一条路由栈，切换标签就是切换一整套页面实例，由 Vue Router 驱动。
Vue Stack Tabs标签级的隔离，栈式的导航
基于 Vue Router 的 Vue 3 多标签页方案。每个标签都持有自己的页面实例、缓存和导航栈，不同标签的页面互不干扰。
Skip to content
首页keep-alive
每个标签 = 独立页面实例 + 缓存 + 导航栈
30 秒接入
bash
pnpm add vue-stack-tabsbash
npm install vue-stack-tabsbash
yarn add vue-stack-tabsts
// main.ts
import { createApp } from 'vue'
import VueStackTabs from 'vue-stack-tabs'
import 'vue-stack-tabs/dist/style.css'
const app = createApp(App)
app.use(router)
app.use(VueStackTabs)
app.mount('#app')然后在承载标签的父路由里放一个 <VueStackTabs iframe-path="/iframe" />，其余交给路由。详见快速上手。
和「一个标签一个 iframe」相比
| 每个标签一个 iframe | vue-stack-tabs | |
|---|---|---|
| 隔离粒度 | 浏览器级，最彻底 | Vue 作用域级，够用且由你掌控 |
| 运行开销 | 每个 iframe 一份运行时 | 共享一份运行时，页面按标签缓存 |
| 组件通信 | 需要 postMessage 序列化 | 直接复用组件、store 与类型 |
| 路由 | 各自独立的 URL 与历史 | 与 Vue Router 同步，栈式前进 / 后退 |
| 样式 | 浏览器天然隔离 | 隔离边界由你决定 |
当你确实需要文档级隔离（例如嵌入第三方站点）时，可以继续使用 iframe 标签。