LayoutBreadcrumb.tsx

import type { AppRouteRecordRaw } from '/@/router/types';
import type { RouteLocationMatched } from 'vue-router';

import { defineComponent, TransitionGroup, unref, watch, ref } from 'vue';
import Breadcrumb from '/@/components/Breadcrumb/Breadcrumb.vue';
import BreadcrumbItem from '/@/components/Breadcrumb/BreadcrumbItem.vue';
import { useRouter } from 'vue-router';
import router from '/@/router';
import { PageEnum } from '/@/enums/pageEnum';
import { isBoolean } from '/@/utils/is';

import { compile } from 'path-to-regexp';
import Icon from '/@/components/Icon';

export default defineComponent({
  name: 'BasicBreadcrumb',
  props: {
    showIcon: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    const itemList = ref<AppRouteRecordRaw[]>([]);
    const { currentRoute, push } = useRouter();

    function getBreadcrumb() {
      const { matched } = unref(currentRoute);
      const matchedList = matched.filter((item) => item.meta && item.meta.title).slice(1);
      const firstItem = matchedList[0];
      const ret = getHomeRoute(firstItem);

      if (!isBoolean(ret)) {
        matchedList.unshift(ret);
      }
      itemList.value = ((matchedList as any) as AppRouteRecordRaw[]).filter(
        (item) => item.meta && item.meta.title && !item.meta.hideBreadcrumb
      );
    }

    function getHomeRoute(firstItem: RouteLocationMatched) {
      if (!firstItem || !firstItem.name) return false;
      const routes = router.getRoutes();
      const homeRoute = routes.find((item) => item.path === PageEnum.BASE_HOME);
      if (!homeRoute) return false;
      if (homeRoute.name === firstItem.name) return false;
      return homeRoute;
    }

    function pathCompile(path: string) {
      const { params } = unref(currentRoute);
      const toPath = compile(path);
      return toPath(params);
    }

    function handleItemClick(item: AppRouteRecordRaw) {
      const { redirect, path, meta } = item;
      if (meta.disabledRedirect) return;
      if (redirect) {
        push(redirect as string);
        return;
      }
      return push(pathCompile(path));
    }

    watch(
      () => currentRoute.value,
      () => {
        if (unref(currentRoute).name === 'Redirect') return;
        getBreadcrumb();
      },
      { immediate: true }
    );

    return () => (
      <Breadcrumb class="layout-breadcrumb">
        {() => (
          <TransitionGroup name="breadcrumb">
            {() => {
              return unref(itemList).map((item) => {
                const isLink = !!item.redirect && !item.meta.disabledRedirect;
                return (
                  <BreadcrumbItem
                    key={item.path}
                    isLink={isLink}
                    onClick={handleItemClick.bind(null, item)}
                  >
                    {() => (
                      <>
                        {props.showIcon && item.meta.icon && item.meta.icon.trim() !== '' && (
                          <Icon icon={item.meta.icon} class="icon mr-1 mb-1" />
                        )}
                        {item.meta.title}
                      </>
                    )}
                  </BreadcrumbItem>
                );
              });
            }}
          </TransitionGroup>
        )}
      </Breadcrumb>
    );
  },
});