提交 | 用户 | 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 |
}); |