vue3-router-tabs

添加tab的时候自动会定位到视图界面

使用

1、安装

npm i vue3-router-tabs -D

2、使用

<template>
  <RouterTabs 
      :tabs="tabs"
      :route="route"
  ></RouterTabs>
</template>
<script setup lang="ts">
import 'vue3-router-tabs/lib/style.css' // 引入样式
import { RouterTabs } from 'vue3-router-tabs' // 引入组件
import type { TabType } from 'vue3-router-tabs/lib/components/router-tabs/types' // 引入类型 js可以不引入

import { useRoute } from 'vue-router'
const route = useRoute()

const tabs = ref<TabType[]>([
  { name: '表格', path: '/table', activeMenu: 'table' },
  { name: '标题', path: '/title', activeMenu: 'title' },
  { name: '卡片', path: '/card', activeMenu: 'card' }
])
</script>

属性 & 事件

属性	说明	类型	是否必填
tabs	支持双向绑定v-model	TabType[]	是
route	路由对象, 用来绑定选中和跳转	Route	否
handleTabClick	tab点击的回调	function(tab: TabType)	否
handleDeleteAllTab	关闭所有页面的回调 type的值为：all(关闭所有)， other(关闭其它)	function(type:string)	否

TabType类型

interface TabType {
  name: string // 菜单名称
  activeMenu?: string // 菜单选中绑定的值
  path: string //路由跳转的地址
  meta?: any // 自定义参数。。类似router的meta
}

注意点

::: warning 1、绑定的时候最好传入route对象, 因为选中是根据route对象的path来判断的, 或者根据route的meta内的activeMenu来判断选中的。
2、默认返回首页的path为/ :::