tabsPlugin - 多页签功能

什么是 tabsPlugin？

tabsPlugin 依赖 visitedRoutesPlugin 插件，在 visitedRoutesPlugin 的基础上会过滤掉一些非 Layout 中的路由，例如登录页等。还额外做了持久化、固定页签不可被删除、隐藏页签等功能。

启用插件

import { createRouter, vistedRoutesPlugin } from '@pro/router'
import { tabsPlugin } from './plugins/tabs-plugin'

const router = createRouter({
  // ... 其他配置
  plugins: [
    vistedRoutesPlugin(),
    tabsPlugin()
  ]
})

在路由中

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: {
      fixedInTabs: true // 固定页签
    }
  },
  {
    path: '/users',
    component: Users,
    meta: {
      hideInTabs: true // 不显示在页签中
    }
  }
]

在组件中

<template>
  <h3>最近访问</h3>
  <ul>
    <li v-for="route in $router.visitedRoutesPlugin.routes" :key="route.path">
      <span>{{ route.meta?.title }}</span>
    </li>
  </ul>
</template>

路由 Meta 配置选项

选项	类型	默认值	说明
hideInTabs	boolean	false	选填，是否不在多页签中显示
fixedInTabs	boolean	false	选填，是否在多页签中固定