vue3实现vue-enemt-admin中标签页面的效果

Vue3 中实现类似于 Vue-Element-Admin 中的标签页面效果，可以按照以下步骤进行：

1. 创建一个 `Layout` 组件，用于包含页面内容和标签页组件。

2. 在 `Layout` 组件中，使用 `router-view` 标签来渲染当前路由对应的组件。

3. 创建一个 `TagsView` 组件，用于显示标签页列表，并提供添加、删除等操作。

4. 在 `TagsView` 组件中，监听路由的变化，根据当前路由动态添加标签页。

5. 在 `TagsView` 组件中，提供标签页的删除操作，点击标签页时切换路由。

具体实现可以参考以下代码：

// Layout.vue

<template>
  <div class="layout">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">
      <router-view></router-view>
    </div>
    <TagsView></TagsView>
  </div>
</template>

<script>
import TagsView from './TagsView.vue'

export default {
  name: 'Layout',
  components: {
    TagsView,
  },
}
</script>

<style>
/* 样式省略 */
</style>

// TagsView.vue

<template>
  <div class="tags-view">
    <div class="tags">
      <div
        v-for="(tag, index) in visitedViews"
        :key="tag.path"
        class="tag"
        :class="{ active: activeIndex === index }"
        @click="handleTagClick(index)"
      >
        {{ tag.meta.title }}
        <span class="close" @click.stop="handleTagClose(index)">x</span>
      </div>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent } from 'vue'
import { useRoute, useRouter } from 'vue-router'

export default defineComponent({
  name: 'TagsView',
  setup() {
    const router = useRouter()
    const route = useRoute()

    // 访问过的页面
    const visitedViews = computed(() =>
      router.getMatchedComponents().map(({ meta, ...rest }) => ({
        meta,
        ...rest,
      })),
    )

    // 当前激活的页面索引
    const activeIndex = computed(() =>
      visitedViews.value.findIndex((view) => view.path === route.path),
    )

    // 标签页点击事件
    const handleTagClick = (index) => {
      const path = visitedViews.value[index].path
      router.push(path)
    }

    // 标签页关闭事件
    const handleTagClose = (index) => {
      const path = visitedViews.value[index].path
      router.push('/')
      router.replace(path)
    }

    return {
      visitedViews,
      activeIndex,
      handleTagClick,
      handleTagClose,
    }
  },
})
</script>

<style>
/* 样式省略 */
</style>

在以上代码中，我们使用了 Vue3 的 Composition API，通过 `computed` 创建计算属性，通过 `defineComponent` 创建组件。使用了`useRouter`和`useRoute`两个方法可以获取到当前路由信息。在 `TagsView` 组件中，我们监听了路由的变化，动态添加标签页，并提供了标签页的删除和切换操作。同时，我们在 `Layout` 组件中使用 `router-view` 标签来渲染当前路由对应的组件，实现了类似于 Vue-Element-Admin 中的标签页面效果。