Vue Router Tab

# API - RouterTab

# <router-tab> 配置参数

# tabs

初始页签数据，进入页面时默认显示的页签。相同 key 的页签只保留第一个

  • 类型: Array <String | Object>

    • tabs 子元素类型为 String 时，应配置为要打开页面的 fullPath ，页签的标题、图标、提示等信息会从对应页面的 router 配置中获取

    • tabs 子元素类型为 Object 时:

      • to: 页签路由地址，跟 router.push 的 location 参数一致，可以为 fullPath，也可以为 location 对象 - 参考文档 (opens new window)

      • title: 页签标题，如果页面有设置 routeTab.title 动态标题，可在此设置最终的动态标题值，以免与默认从 router 获取的标题不一致

      • closable: 页签是否允许关闭，默认为 true

  • 默认值: []

# restore

是否在浏览器刷新后恢复页签

开启后，浏览器刷新后将会还原刷新前的页签

  • 类型: Boolean | String

    • 类型为 String 且不为空字符串时，RouterTab 会拼接该值作为 SessionStorage 的 key 来本地存储页签信息

  • 默认值: false

# restore-watch

是否监听 restore 参数自动恢复页签

开启后，RouterTab 会监听 restore 选项，改变后自动恢复本地存储的对应页签

  • 类型: Boolean

  • 默认值: false

# default-page

默认页面，最后一个页签关闭或者页签重置后跳转的默认地址。

程序会自动获取页签父路由地址为默认页面。

  • 类型: String | Object location 地址

  • 默认值: 页签组件父路由地址。

# tab-transition

页签过渡效果，新增和关闭页签时的过渡。

  • 类型: String | Object

  • 默认值: 'router-tab-zoom'

# page-transition

页面过渡效果。

  • 类型: String | Object

    同 tab-transition

  • 默认值: { name: 'router-tab-swap', mode: 'out-in' }

# page-scroller

全局滚动元素选择器，设置后已缓存的页签重新激活时将会还原滚动位置。

  • 类型: String

  • 默认值: '.router-tab__container'

# contextmenu

自定义右键菜单

  • 类型: Boolean | Array <String | Object>

    • 设置为 false 时禁用右键菜单

    • 设置为数组时可自定义右键菜单

      • 数组中菜单项类型为 String 时，为内置菜单项

      • 数组中菜单项类型为 Object 时，如果 id 与内置菜单项匹配，则扩展内置菜单；否则为自定义菜单

  • 默认值: true

菜单项配置

属性 说明 类型 默认值 必需
id id String - ✅
title 名称 String | Function(context) - ✅
icon 图标 String | Function(context) - -
tips 提示 String | Function(context) - -
class class String | Array | Object | Function(context) - -
visible 是否可见 Function(context) => String true -
enable 是否启用 Function(context) => String true -
handler 菜单触发方法 Function(context) - ✅

菜单项动态参数 context 说明

属性 说明
$tabs RouterTab 组件实例
$menu 菜单项组件实例
target 右键操作的页签项实例
data 右键相关数据

# dragsort

是否支持页签拖拽排序

  • 类型: Boolean

  • 默认值: true

# append

新页签插入位置

  • 类型: String

  • 可选值: 'last' 末尾、'next' 下一个

  • 默认值: 'last'

# keep-last-tab

是否保留最后一个页签不被关闭

  • 类型: Boolean

  • 默认值: true

# keep-alive

默认是否缓存页签，可通过路由 meta.keepAlive 重置

  • 类型: Boolean

  • 默认值: true

# max-alive

最大缓存数，0 则不限制

  • 类型: Number

  • 默认值: 0

# reuse

是否复用路由组件，可通过路由 meta.reuse 重置

  • 类型: Boolean

  • 默认值: false

# i18n

页签国际化转换

function(key: string, params: []): string

  • 类型: Function

  • 参数:

    • {String} [key]: 国际化字段 key

    • {Array} [params] 国际化字段参数列表

  • 返回: String 国际化转换后的字符串

# lang

组件语言

  • 类型: String | Object

    • 如果类型为 String，可以设置为内置的语言 'zh' 和 'en'

    • 如果类型为 Object，可设置自定义的语言

  • 默认值: 'auto'。 根据浏览器语言自动识别组件语言

# RouterTab 实例属性

在组件内部可通过 this.$tabs.[prop] 访问

# routerTab.items

所有的页签数据

# routerTab.activeTab

当前激活的页签数据

# routerTab.activeTabId

当前激活的页签 id

# RouterTab 实例方法

提示

在 Vue 实例内部，您可以通过 this.$tabs 来访问路由页签实例。例如: 调用 this.$tabs.close() 来关闭当前页签。

# routerTab.open

打开指定地址的页签（默认为全新打开）

  • 参数:
    • {String | Object} [path] 要打开的路由地址 - 参考文档 (opens new window)
    • {Boolean} [isReplace = false] 是否 $router.replace 方式打开
    • {Boolean} [refresh = true] 是否全新打开（会清理之前的页签页面缓存）

# routerTab.close

关闭指定页签

  • 调用:

    1. this.$tabs.close({id, path, match, force, to, refresh})
    2. this.$tabs.close(path, to)

  • 参数:

    • {String} [id] 通过页签 id 关闭
    • {location} [path] 通过路由路径关闭页签，如果未配置 id 和 path 则关闭当前页签
    • {Boolean} [match = true] path 方式关闭时，是否匹配 path 完整路径
    • {Boolean} [force = true] 是否强制关闭
    • {location} to 关闭后跳转的地址，为 null 则不跳转
    • {Boolean} [refresh = false] 是否全新打开跳转地址

# routerTab.refresh

刷新指定路由地址的页签

  • 参数:
    • {location} [path] 路由地址 - 参考文档 (opens new window)
    • {Boolean} [match = true] 是否全匹配（匹配 fullPath 去除 hash 部分）
    • {Boolean} [force = true] 是否强制刷新

# routerTab.refreshAll

刷新所有页签

  • 参数:
    • {Boolean} [force = false] 如果 force 为 true，则忽略页面组件的 beforePageLeave 配置，强制刷新所有页签

# routerTab.reset

重置页签到初始状态

  • 参数:
    • {location} [to] 重置后跳转的地址，默认为 default-page

# routerTab.openIframe

打开 Iframe 页签

  • 参数:
    • {String} [src] 要打开的 Iframe 页签链接
    • {String} [title] 页签标题
    • {String} [icon] 页签图标

# routerTab.closeIframe

关闭 Iframe 页签

  • 参数:
    • {String} [src] 要关闭的 Iframe 页签链接

# routerTab.refreshIframe

刷新 Iframe 页签

  • 参数:
    • {String} [src] 要刷新的 Iframe 页签链接

# RouterTab 事件

# iframe-mounted

iframe 节点挂载就绪

  • 参数:
    • {String} [url] iframe 的链接地址
    • {HTMLIFrameElement} [iframe] iframe 节点

# iframe-loaded

iframe 内容加载成功

  • 参数:
    • {String} [url] iframe 的链接地址
    • {HTMLIFrameElement} [iframe] iframe 节点

# RouterTab 插槽

RouterTab 支持通过以下插槽个性化页签组件：

插槽名称 作用域 说明
default tab 页签项
start - 页签栏开始
end - 页签栏结束

# Route.meta 路由元信息

通过路由的 meta 信息，我们可以配置路由页签的标题、图标、提示和缓存规则

属性 说明 类型 默认值 备注
key 路由 key String | Function - 用于页签 id 和组件缓存 key
内置 path fullPath 两种规则
keepAlive 是否缓存 Boolean true 如果不缓存，每次进入页面将重新创建实例
reuse 是否复用组件 Boolean false 相同页签规则下，同一个路由的 params 或 query 更改后是否复用之前的组件
title 页签标题 String | Array '无标题' 支持国际化
参考: 教程 - 多语言支持
tips 鼠标悬浮提示 String | Array 和标题一致 支持国际化
参考: 教程 - 多语言支持
icon 图标 String - -
tabClass 页签 class String - -
closable 是否可关闭 Boolean true -

# 扩展

说明

pageComp: 页面组件选项

vm: Vue 组件实例

pageVm: 通过 RouterTab 加载的页面组件实例

# pageComp.beforePageLeave

页面离开确认。

页面组件选项，与 data, methods 等选项并列配置

  • 参数:

    • {Object} tab 页签信息
    • {String} type 离开类型:
      • close: 页签关闭
      • refresh: 页签刷新
      • replace: 页签被替换
      • leave: 路由离开
      • unload: 浏览器刷新或者关闭

  • 返回值类型：

    • {String} 离开类型为 unload 时，浏览器离开提示消息
    • {Promise} 其他类型，resolve 离开，reject 阻止离开

# pageComp.pageScroller

页面内部滚动元素选择器，设置后已缓存的页签重新激活时将会还原滚动位置。

值为数组时可应用页面内的多个滚动条。

  • 类型: String | Array

# vm.$tabs

RouterTab 实例

为了方便调用，RouterTab 将实例挂载在 Vue.prototype 上。因此，在所有 Vue 组件内部，您都可以通过 this.$tabs 来访问路由页签实例

# pageVm.routeTab

路由页签配置

RouterTab 通过监听页面组件的 this.routeTab 来更新页面对应页签的标题、图标、提示

上次更新: 2021/5/9 下午4:37:51