summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorpany <[email protected]>2023-06-13 13:01:48 +0800
committerpany <[email protected]>2023-06-13 13:01:48 +0800
commit710ff1cda78f27741529f3ae98b4cf20378be52b (patch)
tree73fe9bfdb9c6400cee361c34a730479e9c428d8f /src
parent62e1a7a63ddb273a21aba579e09570591b17c02d (diff)
perf: 代码优化 layout/Breadcrumb
Diffstat (limited to 'src')
-rw-r--r--src/layout/components/Breadcrumb/index.vue17
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>