@pzy915/router-tabs

作用

与 vue-router 结合的 tab 组件. 基于 vue3 和 element-plus

详细使用文档: router-tab 组件

安装

pnpm add @pzy915/router-tabs mitt

<script lang="ts" setup>
  import {
    useOpenTabAndPush,
    refreshRoute,
    removeKeepAliveCache,
    closeCurTab,
    closeOtherTab,
    RouterTabs,
    RouterViewKeepAliveWrapper,
  } from '@pzy915/router-tabs'
  import {
    RouteTabType,
    RouteTransitionName,
  } from '@pzy915/router-tabs/dist/typing.d'
  import '@pzy915/router-tabs/dist/style.css'

  const allTabDataArr: RouteTabType[] = [
    { routeName: 'KeepAliveDemo01', title: '第一个tab' },
    { routeName: 'KeepAliveDemo02', title: '第二个tab' },
  ]
</script>

<template>
  <RouterTabs :tab-datas="allTabDataArr"></RouterTabs>
  <RouterViewKeepAliveWrapper
    :enable-keep-alive="useKeepAlive === 1"
    :routeNameArr="[]"
  ></RouterViewKeepAliveWrapper>
</template>