Skip to content
On this page

标签栏

首先需要在应用配置里开启标签栏功能。

tabbar: {
    enable: true
}

功能介绍

刷新

对当前标签页进行刷新,非激活的标签页无法刷新,并且刷新操作会强制清除页面缓存数据。

关闭

关闭标签页分关闭当前、关闭其它、关闭左侧、关闭右侧,当不满足关闭条件时,选项置灰,无法点击。

固定

将指定标签页设为固定状态,固定的标签页右键无法直接关闭,同时也不会被关闭其它、关闭左侧、关闭右侧标签页操作所关闭。并且固定的标签页会被记录到浏览器缓存,下次访问将保留固定标签页状态。

最大化

通过隐藏导航栏和顶栏,将操作内容区最大化。双击标签页可快速进入最大化。

拖拽排序

标签页合并

当标签栏开启时,框架还提供一个配置属性,即标签页是否合并,首先先看下面这段路由配置。

{
    path: '/news',
    children: [
        {
            path: 'list',
            name: 'NewsList'
            meta: {
                title: '新闻列表'
            }
        },
        {
            path: 'detail/:id',
            name: 'NewsDetail',
            meta: {
                title: '新闻详情',
                sidebar: false,
                activeMenu: '/news/list'
            }
        },
        {
            path: 'create',
            name: 'NewsCreate',
            meta: {
                title: '新增新闻',
                sidebar: false,
                activeMenu: '/news/list'
            }
        }
    ]
}

当设置标签页不合并时,从新闻列表页进入新闻详情页,框架会新增一个新闻详情的标签页,配置如下。

tabbar: {
    mergeTabs: false
}

而设置当标签栏合并时,从新闻列表页进入新闻详情页,框架会将新闻列表的标签页,替换成新闻详情的标签页,始终只保持一个标签页,配置如下。

tabbar: {
    mergeTabs: true
}

这其中的关键条件就是 activeMenu 这个参数,也就是框架会将设置过 activeMenu 的路由与 activeMenu 指向的目标路由合并为一个标签页,当在这些路由里相互跳转时,始终只保持一个标签页。

通常使用场景是将同个模块的路由合并成一个标签页,使标签栏看上去相对简洁明了。