vue3项目中 路由elementPlus当中的标签页结合封装

在项目当中大家应该都有看到过，像标签页一样的面包屑吧，接下来我为大家介绍一下，主要组成部分：路由+组件库的标签页。ok就这么easy！！！它实现的方法也不难哦

请看效果图

ok，在中间实现思路与大家分享一下：主要是使用watch监听我们的route路由的变化，然后根据传递过来的路由信息，进行标签页的添加与切换，添加删除，都是标签页自带的，下面是代码有详细的介绍：

//这里我是封装的一个组件哦，在主页面记得引入一下
//标签页替代面包屑
<template>
  <el-tabs
    v-model="editableTabsValue"
    type="card"
    editable
    class="demo-tabs"
    @tab-remove="delTag"
    @tab-change="goNext"
  >
    <el-tab-pane
      v-for="item in routerMenu"
      :key="item.name"
      :label="item.title"
      :name="item.name"
    >
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts">
import {
  ref,
  watch,
} from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
let route = useRoute();
let router = useRouter();
//当选中那个标签时，获取焦点，通过name
const editableTabsValue = ref("");
//标签的列表
const routerMenu = ref([]);
//通过监听路由route，来实现标签页的添加，以及获取焦点
watch(route, (newVal, oldVal) => {
  //获取当前的 路由信息
  console.log(newVal.matched[0].meta.title);
  //定义一个flag 来判断是否需要添加标签
  let flag = routerMenu.value.every((e) => {
    return e.name != newVal.matched[0].path;
  });
  //根据当前路由的path与标签页的name进行比较，如果相同，则获取焦点
  editableTabsValue.value = newVal.matched[0].path;
  //，如果此时路由表中没有这个标签，则添加
  if (flag) {
    routerMenu.value.push({
      title: newVal.matched[0].meta.title,
      name: newVal.matched[0].path,
    });
  }
});
//这里当点击标签页的删除时触发。
let delTag = (name) => {
  //如果还剩下最后一个则不可以删除，导入elementui的提示框
  if (routerMenu.value.length == 1) {
    ElMessage({
      message: "最后一个不可以删除哦！！！",
      type: "success",
    });
    return;
  }
  // console.log(name);
  //根据splice删除 ，下标需要通过传递过来的name与标签页列表的name进行比较，获取删除的下标
  routerMenu.value.splice(
    routerMenu.value.findIndex((e) => e.name == name),
    1
  );
  //删除之后，路由跳转到标签页列表的后面的路由页面
  router.push(routerMenu.value[routerMenu.value.length - 1].name);
};
//点击标签页时，切换路由
let goNext = (name) => {
  router.push(name);
};
</script>

<style lang="scss" scoped>
</style>

ok啦，今天就分享到这里吧，加油！！！祝大家生活愉快