标签页tabs如何实现,Tabs.vue

<template>
      <div class="tab-main">
      <el-scrollbar>
        <div class="scrollbar-flex-content">
   <el-tag
    v-for="(item,index) in tags"
    :key="item.path"
    :closable="!!index"
    type="danger"
    :disable-transitions="false"
    @close="handleClose(index)"
    :style="{ marginLeft: index ? '5px':'0px' }"
    style="cursor: pointer ;"
    :effect="activePath == item.path ? 'dark':'plain'"
    @click="goPage(item.path)"
    
  >
  {{ item.name }}
  </el-tag>
</div>
</el-scrollbar>
</div>
    </template>

<script setup >
import {  reactive, watch , ref} from 'vue'
import { useRoute , useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const tags = reactive([])
// 当前激活的导航高亮
const activePath = ref("")

watch(
  ()=>route,
  (to)=>{
  activePath.value=to.fullPath
  console.log({...route})
  //1.这个是解决打开重复导航，标签重复出现的bug
  //2.if如果不存在当前标签tabs这出现新的标签
  const hasTag = tags.find((item)=> item.path===to.fullPath);
  if(!hasTag){
    tags.push({
    name: to.meta.name,
    path: to.fullPath,
  });
  }
},
{
    deep: true,
    immediate: true,
}
)
// 设置点击事件点击标签页tabs进入到对应页面
const goPage = (path)=>{
 router.push(path)
 console.log(path)
}
// 设置关闭标签页事件
const handleClose = (idx)=>{
     tags.splice(idx,1);
     router.push(tags[idx-1].path)
}
</script>
<style scoped>
.scrollbar-flex-content {
  display: flex;
  height: 25px;
  margin-top: 5px;
  margin-left: 14px;
  border-top: 2px dashed #ccc;
  border-bottom: 2px dashed #ccc;
  border-left: 2px dashed #ccc;
}
</style>

新建Tabs.vue然后导入到页面