Vue中tabs标签页实现 --（携带参数界面也支持）

效果图

• 需要运行看效果的访问以下网址(切换到 tabs-router 分支， vue-userList为前端可以看效果的项目 -- 已关闭接口 -- 直接点登录即可)：
  项目地址

主要代码

• 以下代码储存路由信息时会保留路由携带的参数，点击tabs标签页跳转时会携带原本携带的参数。
• 刷新界面后会默认添加当前页的tabs标签页，不会保留刷新前的存储tabs标签页数据，可根据需求考虑要不要进行浏览器存储以保证刷新后数据还保留。
• 无需下包，无需引入，以下代码都在菜单配置文件里书写，标签名取值来自路由文件的title属性。
• 以下唯一标识是由 路由+路由title名+路由参数id组成，可根据实际需求更改，但必须保持唯一性。

`路由示例`
// 信息总览
import home from '@/views/home';
export default {
  path: '/shopList',
  username: 'shopList',
  component: home,
  children: [
    {
      path: '',
      component: () => import('@/views/shop/index'),meta: { title: '信息总览', icon: 'el-icon-s-promotion' },
    },
    {
      path: '/shopList/shopDetails',
      component: () => import('@/views/shop/components/shopDetails.vue'),meta: { title: '详情-信息总览'}
    },
  ],
};

          
            
              {{ item.meta.tagNameRouter }}
            
          
          
        

data() {
    return {
      editableTabsValue: "",
      editableTabs: [],
    };
  },
  // 侦听器
  watch: {
    // 监听路由变化
    $route: {
      handler: function (val, oldVal) {
        // 添加tag信息
        this.addRouteTags();
      },
      // 深度观察监听
      deep: true,
    },
  },
  mounted() {
    // 页面刷新后添加当前路由tabs信息
    this.addRouteTags();
  },
// 组件方法
  methods: {

    // 添加路由信息 -- 用于渲染tabs -- 同时添加详情带参数等路由界面信息
    addRouteTags() {
      const pageId = `${this.$route.query.id ? this.$route.query.id : ""}`;
      this.editableTabsValue = `${this.$route.path}-${this.$route.meta.title}-${pageId}`;
      // 重复的不添加 -- 匹配路由-名字-id  是否相同
      if (
        this.editableTabs.find(
          (x) =>
            `${x.path}-${x.meta.tagNameRouter}-${x.meta.pageId}` ===
            `${this.$route.path}-${this.$route.meta.title}-${pageId}`
        )
      )
        return;
      // 添加tabs信息
      this.editableTabs.push({
        path: this.$route.path,
        query: this.$route.query,
        meta: {
          tagNameRouter: this.$route.meta.title,
          pageId: pageId,
        },
      });
    },

    // tabs标签页点击
    tabCliclRouter(val) {
      // 匹配正确的路由信息 -- 名字是路由多个唯一参数拼接而成 -- val.name此字段必须确保是唯一的
      const pageRouter = this.editableTabs.find(
        (x) => `${x.path}-${x.meta.tagNameRouter}-${x.meta.pageId}` === val.name
      );
      // 跳转tabs存储的对应路由信息，有参数携带参数
      this.$router.push({ path: pageRouter.path, query: pageRouter.query });
    },

    // tabs标签页移除
    tabRemoveRouter(val) {
      // 删除到第一个时禁止
      if (this.editableTabs.length === 1) return;
      // 找到对应的要删除tabs数据
      const routerFind = this.editableTabs.find(
        (x) => `${x.path}-${x.meta.tagNameRouter}-${x.meta.pageId}` === val,
      );
      // 对要删除的进行去除 -- 找到对应的位置
      const indexPath = this.editableTabs.findIndex(
        (x) =>
          `${x.path}-${x.meta.tagNameRouter}-${x.meta.pageId}` ===
          `${routerFind.path}-${routerFind.meta.tagNameRouter}-${routerFind.meta.pageId}`
      );
      // 根据找到索引进行删除操作
      this.editableTabs.splice(indexPath, 1);
      // 如果删除的是当前高亮的进行特殊处理 -- 使其高亮到前一个上，并跳转到高亮区域的界面
      if (
        `${routerFind.path}-${routerFind.meta.tagNameRouter}-${routerFind.meta.pageId}` ===
        val
      ) {
        // 改变高亮当前绑定值
        this.editableTabsValue = `${
          this.editableTabs[this.editableTabs.length - 1].path
        }-${
          this.editableTabs[this.editableTabs.length - 1].meta.tagNameRouter
        }`;
        // 跳转到当前高亮区域页面
        this.$router.push({
          path: this.editableTabs[this.editableTabs.length - 1].path,
          query: this.editableTabs[this.editableTabs.length - 1].query,
        });
      }
    },
  },