多页面

平台默认支持多页面，并且支持多页面控制器上的 tab 标签页右键菜单控制，可以实现“关闭全部”，“关闭其它”，“关闭左侧”，“关闭右侧”的功能。

注册页面

iform平台的多页面设置源头在 iform-admin-ui/src/router/routes.js，该文件导出了一个 frameInRoutes 变量，iform-admin-ui/src/main.js 中使用下面的方式导入：

import { frameInRoutes } from '@/router/routes'

然后在根实例中加入了一个名为 getAllPageFromRoutes 的方法，该方法在 created 生命周期调用，递归处理 frameInRoutes 中的数据将支持多标签页显示所有页面数据扁平为一位数组，然后使用：

$store.commit('iform/page/poolSet', pool)

将得到的路由数据存储到 vuex 中备用。这份数据在操作多页面数据时会使用到。

触发

新建页面的触发在 iform-admin/src/router/index.js 中的 router.afterEach 钩子中。涉及的方法参见 API

标签页控制

标签页组件在 iform-admin/src/layout/header-aside/components/tabs/index.vue，该组件实现多页面的各种关闭控制。涉及的方法参见 API

页面缓存

页面打开缓存的效果 | 页面关闭缓存的效果

要实现页面缓存需要同时满足以下两个条件：

页面组件需要有 name 属性并且 name 属性的值要与当前页面在路由信息中的 name 字段一致。
页面路由设置中要指定 meta: { cache: true }
下面是两段示例代码，请注意高亮行。

页面组件：

<template>
  <iform-container>
    我会被缓存
  </iform-container>
</template>

<script>
export default {
  name: 'foo-page'
}
</script>

该页面组件在路由中的数据：


{
  path: '/foo/page',
  name: 'foo-page',
  meta: {
    title: '这是一个会被缓存的页面',
    cache: true
  },
  component: () => import('page/foo/page.vue')
}

FAQ

1、页面的tab缓存
采用vue 的keep-alive进行缓存

在config.js配置根据配置

// 页面是否默认开启缓存
export const PAGE_CACHE_ENABLE = toBoolean(__IFORM_CONFIG__.PAGE_CACHE_ENABLE, true)
// (需先开启缓存才有效)页面标签页（tabs）开启缓存最大数量
export const PAGE_CACHE_MAX = __IFORM_CONFIG__.PAGE_CACHE_MAX || 100
// (需先开启缓存才有效) 缓存模式，默认：default(所有都tab开启)；菜单：menu(由菜单决定开启)
export const PAGE_CACHE_MODE = __IFORM_CONFIG__.PAGE_CACHE_MODE || 'default'
// (需先开启缓存才有效) 页面缓存设置为空时默认值，默认开启还是关闭缓存
export const PAGE_CACHE_DEFAULT = toBoolean(__IFORM_CONFIG__.PAGE_CACHE_DEFAULT, true)

作者：hugh 创建时间：2023-12-25 15:09
最后编辑：hugh 更新时间：2025-08-28 14:21