sidebar: auto

API 参考

RouterTab Props

alive-id

页面组件缓存的 id

类型: String | Function
- 如果类型为 String ，则可使用内置的缓存规则，path (默认) 和 fullPath
- 如果类型为 Function ，则取 aliveId(route) 返回的字符串。该函数传入相同的 route 应返回固定的字符串，以免页签无法与缓存的页面对应
默认值: 'path'

根据 route.path 来缓存页面组件。

i18n

页签国际化转换

类型: Function
参数:
- {String} [key]: 国际化字段 key
- {Array} [params] 国际化字段参数列表
返回: Strong 国际化转换后的字符串

language

组件语言

类型: String | Object
- 如果类型为 String ，可以设置为内置的语言 'zh-CN' (默认) 和 'en'
- 如果类型为 Object ，可设置自定义的语言
默认值: 'zh-CN'

tabs

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

类型: Array <String | Object>
- tabs子元素类型为 String 时，应配置为要打开页面的 fullPath ，页签的标题、图标、提示等信息会从对应页面的 router 配置中获取
- tabs子元素类型为 Object 时:
- to: 页签路由地址，跟 router.push 的 location 参数一致，可以为 fullPath，也可以为 location 对象 - 参考文档
- title: 页签标题，如果页面有设置 routerTab.title 动态标题，可在此设置最终的动态标题值，以免与默认从 router 获取的标题不一致
- closable: 页签是否允许关闭，默认为 true
默认值: []

router-view

内置 router-view 组件的配置

类型: Object

配置参考: Vue Router - <router-view> Props

默认值: {}

tab-transition

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

类型: String | Object
- 类型为 String 时，应配置为 transition.name
- 类型为 Object 时，配置参考: Vue - transition
默认值: 'router-tab-zoom'

page-transition

页面过渡效果

类型: String | Object

同 tab-transition

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

RouterTab 实例属性

routerTab.activedTab

当前激活的页签 id

RouterTab 实例方法

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

routerTab.close

关闭指定 location 的页签

参数:
- {String | Object} [location] 路由地址 - 参考文档
- {Boolean} [fullMatch = true] 是否全匹配（匹配fullPath去除hash部分）

routerTab.refresh

刷新指定 location 的页签

参数:
- {String | Object} [location] 路由地址 - 参考文档
- {Boolean} [fullMatch = true] 是否全匹配（匹配fullPath去除hash部分）

routerTab.refreshAll

刷新所有页签

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

routerTab.openIframeTab

打开 iframe 页签

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

routerTab.closeIframeTab

关闭 iframe 页签

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

routerTab.refreshIframeTab

刷新 iframe 页签

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

Route.meta 路由元信息

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

meta.title

页签标题

类型: String | Array
默认值: '新页签'

该字段支持国际化配置，参考: 教程 - 多语言支持

meta.icon

页签图标

类型: String

meta.tips

页签提示

类型: String | Array
默认值: 默认和页签标题 meta.title 保持一致

该字段支持国际化配置，参考: 教程 - 多语言支持

meta.aliveId

页面组件缓存的 id，用以设置路由独立的页签缓存规则。

配置参考: RouterTab Props > alive-id

RouterPage 路由页面

通过 RouterTab 加载的页面组件

beforePageLeave

页面离开确认。页面组件选项，与 data, methods 并列

参数:
- {Function} resolve 执行后允许离开页签
- {Function} reject 执行后阻止离开页签
- {Object} tab 页签信息
- {String} type 离开类型: close: '关闭', refresh: '刷新', replace: '替换'

vm.$routerTab

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

vm.routeTab

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

vm._isRouterPage

是否是路由页面: 在通过 RouterTab 加载的页面组件内部，访问 this._isRouterPage 会返回 true

::: tip 应用: 在需要给路由页面添加全局混入 mixin 时，可在生命周期钩子（ created 之后）里判断 this._isRouterPage :::

README.md 5.7 KB Історія Запис