API 总览

本文按使用场景整理 @xsbcme/vue-tab-router 的公开 API。建议先阅读指南，再回到这里查具体参数和返回值。

导入入口

import {
  createTabsManager,
  useTabsManager,
  useTabMenu,
  DynamicTabsComponent,
  DynamicContainerComponent,
  createTabUrlSyncPlugin,
} from "@xsbcme/vue-tab-router";

完整导出来自包入口：

export * from "./components";
export * from "./use-tabs-manager";
export * from "./use-tab-menu";
export * from "./iframe-message";
export * from "./abstract-storage-adapter";
export * from "./storage-adapter";
export * from "./tabs-manager-plugin";
export * from "./tab-url-sync-plugin";
export * from "./types";
export { TabViewUrl, type TabViewUrlRelative } from "./utils";

分类索引

分类	适合查什么
TabsManager	创建实例、打开/关闭/刷新/更新标签、弹窗显示、scoped manager。
组合式 API	useTabsManager、useTabMenu、页面内声明标题和守卫。
内置组件	DynamicContainerComponent、DynamicTabsComponent、面包屑、预览容器等。
插件与 hooks	自定义插件、生命周期 hooks、URL 同步插件。
类型与工具	TabsManagerOptions、IOpenTabOptions、TabViewMeta、TabViewUrl、存储适配器。

常用组合

创建工作台：

const tabsManager = createTabsManager({
  views: {
    modules: import.meta.glob("@/views/**/page-index.vue", { eager: false }),
  },
});

布局渲染：

<template>
  <DynamicTabsComponent />
  <DynamicContainerComponent />
</template>

菜单联动：

const tabMenu = useTabMenu({
  menus: () => menus,
});

地址栏同步：

createTabUrlSyncPlugin(router, {
  routePath: "/dashboard",
  queryKey: "activeTab",
});

命名规则

• _view* 字段是内置 tab 行为或展示参数。
• 非 _view* 字段会进入 tab.viewProps，并作为页面组件 props。
• viewUrl 是打开页面的唯一入口，可以是组件 key、http/https 链接，也可以是 TabViewUrl.createRelative() 生成的相对 iframe 地址。

下一步

• 想查 openTab 参数：看 TabsManager。
• 想查菜单和面包屑返回值：看 组合式 API。
• 想查 URL 同步参数：看 插件与 hooks。
• 想查配置类型：看 类型与工具。