vue3+element-plus+el-tabs+ts下展示路由内容的具体代码

以下是一份 Vue 3 + Element Plus + TypeScript 中使用 el-tabs 展示路由内容的代码示例：

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane v-for="route in routes" :key="route.path" :label="route.meta.title">
      <router-view :key="route.path" :name="route.path"></router-view>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElTabs, ElTabPane, ElMessage } from 'element-plus'

export default defineComponent({
  name: 'TabRouterView',
  components: { ElTabs, ElTabPane },
  data() {
    return {
      activeTab: '',
      routes: []
    }
  },
  created() {
    this.routes = this.$router.options.routes.filter((route: any) => route.meta && route.meta.title)
    this.activeTab = this.$route.path
    this.$router.beforeEach((to, from) => {
      if (!this.routes.some((route: any) => route.path === to.path)) {
        ElMessage.error('路由不存在')
        return false
      }
      this.activeTab = to.path
      return true
    })
  }
})
</script>

这段代码使用了 el-tabs 组件来展示路由内容，每个路由对应一个 el-tab-pane，其中 label 属性为路由的标题，同时使用了 router-view 来展示对应路由的组件内容。当路由不存在或切换路由时，会自动切换到对应的 tab。