| 提交 | 用户 | age | ||
| 2f6253 | 1 | import type { AppRouteRecordRaw } from '/@/router/types'; |
| 陈 | 2 | import type { RouteLocationMatched } from 'vue-router'; |
| 3 | ||
| 4 | import { defineComponent, TransitionGroup, unref, watch, ref } from 'vue'; | |
| 5 | import Breadcrumb from '/@/components/Breadcrumb/Breadcrumb.vue'; | |
| 6 | import BreadcrumbItem from '/@/components/Breadcrumb/BreadcrumbItem.vue'; | |
| 7 | import { useRouter } from 'vue-router'; | |
| 8 | import router from '/@/router'; | |
| 9 | import { PageEnum } from '/@/enums/pageEnum'; | |
| 10 | import { isBoolean } from '/@/utils/is'; | |
| 11 | ||
| 12 | import { compile } from 'path-to-regexp'; | |
| 13 | ||
| 14 | export default defineComponent({ | |
| 15 | name: 'BasicBreadcrumb', | |
| 16 | setup() { | |
| 17 | const itemList = ref<AppRouteRecordRaw[]>([]); | |
| 18 | const { currentRoute, push } = useRouter(); | |
| 19 | ||
| 20 | function getBreadcrumb() { | |
| 21 | const { matched } = unref(currentRoute); | |
| 22 | const matchedList = matched.filter((item) => item.meta && item.meta.title).slice(1); | |
| 23 | const firstItem = matchedList[0]; | |
| 24 | const ret = getHomeRoute(firstItem); | |
| 25 | ||
| 26 | if (!isBoolean(ret)) { | |
| 27 | matchedList.unshift(ret); | |
| 28 | } | |
| 29 | itemList.value = ((matchedList as any) as AppRouteRecordRaw[]).filter( | |
| 30 | (item) => item.meta && item.meta.title && !item.meta.hideBreadcrumb | |
| 31 | ); | |
| 32 | } | |
| 33 | ||
| 34 | function getHomeRoute(firstItem: RouteLocationMatched) { | |
| 35 | if (!firstItem || !firstItem.name) return false; | |
| 36 | const routes = router.getRoutes(); | |
| 37 | const homeRoute = routes.find((item) => item.path === PageEnum.BASE_HOME); | |
| 38 | if (!homeRoute) return false; | |
| 39 | if (homeRoute.name === firstItem.name) return false; | |
| 40 | return homeRoute; | |
| 41 | } | |
| 42 | function pathCompile(path: string) { | |
| 43 | const { params } = unref(currentRoute); | |
| 44 | const toPath = compile(path); | |
| 45 | return toPath(params); | |
| 46 | } | |
| 47 | function handleItemClick(item: AppRouteRecordRaw) { | |
| 48 | const { redirect, path, meta } = item; | |
| 49 | if (meta.disabledRedirect) return; | |
| 50 | if (redirect) { | |
| 51 | push(redirect as string); | |
| 52 | return; | |
| 53 | } | |
| 54 | return push(pathCompile(path)); | |
| 55 | } | |
| 56 | ||
| 57 | watch( | |
| 58 | () => currentRoute.value, | |
| 59 | () => { | |
| 60 | if (unref(currentRoute).name === 'Redirect') return; | |
| 61 | getBreadcrumb(); | |
| 62 | }, | |
| 63 | { immediate: true } | |
| 64 | ); | |
| 65 | ||
| 66 | return () => ( | |
| 67 | <> | |
| 03b602 | 68 | <Breadcrumb class="layout-breadcrumb "> |
| 2f6253 | 69 | {() => ( |
| 陈 | 70 | <> |
| 71 | <TransitionGroup name="breadcrumb"> | |
| 72 | {() => { | |
| 73 | return unref(itemList).map((item) => { | |
| 74 | const isLink = !!item.redirect && !item.meta.disabledRedirect; | |
| 75 | return ( | |
| 76 | <BreadcrumbItem | |
| 77 | key={item.path} | |
| 78 | isLink={isLink} | |
| 79 | onClick={handleItemClick.bind(null, item)} | |
| 80 | > | |
| 81 | {() => item.meta.title} | |
| 82 | </BreadcrumbItem> | |
| 83 | ); | |
| 84 | }); | |
| 85 | }} | |
| 86 | </TransitionGroup> | |
| 87 | </> | |
| 88 | )} | |
| 89 | </Breadcrumb> | |
| 90 | </> | |
| 91 | ); | |
| 92 | }, | |
| 93 | }); | |
