diff options
| author | pany <[email protected]> | 2023-06-13 13:01:48 +0800 |
|---|---|---|
| committer | pany <[email protected]> | 2023-06-13 13:01:48 +0800 |
| commit | 710ff1cda78f27741529f3ae98b4cf20378be52b (patch) | |
| tree | 73fe9bfdb9c6400cee361c34a730479e9c428d8f /src | |
| parent | 62e1a7a63ddb273a21aba579e09570591b17c02d (diff) | |
perf: 代码优化 layout/Breadcrumb
Diffstat (limited to 'src')
| -rw-r--r-- | src/layout/components/Breadcrumb/index.vue | 17 |
1 files changed, 9 insertions, 8 deletions
diff --git a/src/layout/components/Breadcrumb/index.vue b/src/layout/components/Breadcrumb/index.vue index 92b64df..90acb5d 100644 --- a/src/layout/components/Breadcrumb/index.vue +++ b/src/layout/components/Breadcrumb/index.vue @@ -6,20 +6,21 @@ import { compile } from "path-to-regexp" const route = useRoute() const router = useRouter() +/** 定义响应式数据 breadcrumbs,用于存储面包屑导航信息 */ const breadcrumbs = ref<RouteLocationMatched[]>([]) +/** 获取面包屑导航信息 */ const getBreadcrumb = () => { - breadcrumbs.value = route.matched.filter((item) => { - return item.meta && item.meta.title && item.meta.breadcrumb !== false - }) + breadcrumbs.value = route.matched.filter((item) => item.meta?.title && item.meta?.breadcrumb !== false) } +/** 编译路由路径 */ const pathCompile = (path: string) => { - const { params } = route const toPath = compile(path) - return toPath(params) + return toPath(route.params) } +/** 处理面包屑导航点击事件 */ const handleLink = (item: RouteLocationMatched) => { const { redirect, path } = item if (redirect) { @@ -29,16 +30,16 @@ const handleLink = (item: RouteLocationMatched) => { router.push(pathCompile(path)) } +/** 监听路由变化,更新面包屑导航信息 */ watch( () => route.path, (path) => { - if (path.startsWith("/redirect/")) { - return - } + if (path.startsWith("/redirect/")) return getBreadcrumb() } ) +/** 初始化面包屑导航信息 */ getBreadcrumb() </script> |
