布局与标签页

标签页

系统内置标签页功能，但是不是所有的路由都需要打开新的标签页，只有部分路由需要打开标签页，如：来电弹屏、工单详情、iframe 这种需要保留多个页面的才采取标签页打开。

路由新标签页

默认情况下，您无需使用代码打开标签页，只需在路由中配置 target: TargetEnum.NEW_TAB 即可，在路由守卫中，会自动打开 tab，tabId 会使用路由 name + params + query，所以传入不同的参数就会打开不同的 tab。

提示

默认情况下您无需使用 layoutTabsUtils 中的方法打开 tab 页，如果您使用 openRouterTab 方法打开路由 tab，那么可能会出现重复调用的问题，因为在路由守卫中已经有此逻辑

正确的使用路由方式打开 tab：

// 如果没有参数可以不写 params
// router直接导入
router.push({ name: 'user', params: { username } });

路由新标签页动态选项卡名称

我们的选项卡名称是读取路由 teta.title 中的信息，固定的名称我们可以直接使用；但是有些场景标签页名称是动态的，比如来电弹屏、工单详情等。这就需要使用 路由独享守卫 来实现，如下所示：

{
  path: '/ticket',
  name: 'ticket',
  component: () => import('@/module/ticket/components/TicketInfo.vue'),
  meta: {
    title: 'ticket',
    target: TargetEnum.NEW_TAB,
  },
  beforeEnter: to => {
    let title = to.meta.title ?? '';
    to.meta.title = title + (to.query.orderCode ?? '');
  },
}

iframe 标签页

一般只是在菜单中配置即可，如有需要可以使用其中的 layoutTabsUtils.openIframeTab() 方法打开！

特殊的第一个标签页

第一个标签页是菜单（路由形式）专用标签页，所有的菜单（路由模式）如果需要使用标签页打开，那么必须在第一个标签页打开。

数据类型

/**
 * 首页导航 tab 标签页数据类型
 */
interface LayoutTabsNavItem {
  /**
   * 标签页唯一id，如果重复会导致标签页无法正常使用
   */
  id: string;
  /**
   * 是否为 iframe
   */
  isIframe: boolean;

  /**
   * 标签是否可关闭
   */
  closable: boolean;

  /**
   * 标签页名称
   */
  name: string;

  /**
   * iframe那么就是访问url
   */
  iframeSrc?: string;

  /**
   * 路由名称
   */
  routerName?: RouteRecordName;

  /**
   * 路由路径参数
   */
  params?: RouteParamsRaw;

  /**
   * 路由参数 ?传参的参数
   */
  query?: LocationQueryRaw;
}