refactor: 面包屑移除首页固定项

This commit is contained in:
Ray.Hao
2026-07-08 18:40:10 +08:00
parent 483fcba96b
commit 9dab4efce3
2 changed files with 9 additions and 20 deletions

View File

@@ -1,7 +1,7 @@
{ {
"name": "vue3-element-admin", "name": "vue3-element-admin",
"description": "Vue3 + Vite + TypeScript + Element-Plus 的后台管理模板vue-element-admin 的 Vue3 版本", "description": "Vue3 + Vite + TypeScript + Element-Plus 的后台管理模板vue-element-admin 的 Vue3 版本",
"version": "4.7.3", "version": "4.7.4",
"private": true, "private": true,
"type": "module", "type": "module",
"scripts": { "scripts": {

View File

@@ -1,6 +1,7 @@
<template> <template>
<el-breadcrumb class="flex-y-center"> <el-breadcrumb class="flex-y-center">
<el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.path"> <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.path">
<!-- 末级或不可跳转的节点显示为纯文本其余可点击 -->
<span <span
v-if="item.redirect === 'noredirect' || index === breadcrumbs.length - 1" v-if="item.redirect === 'noredirect' || index === breadcrumbs.length - 1"
class="color-gray-400" class="color-gray-400"
@@ -28,11 +29,10 @@ type BreadcrumbRoute = {
}; };
const currentRoute = useRoute(); const currentRoute = useRoute();
// 默认补一个首页面包屑
const dashboardRoute: BreadcrumbRoute = { path: "/dashboard", meta: { title: "dashboard" } };
// 根据当前路由参数生成跳转路径 // 面包屑取 matched 链,不拼首页(首页与一级菜单平级,非父级)
const pathCompile = (path: string) => { const pathCompile = (path: string) => {
// 补全动态路由参数,如 /user/:id
const { params } = currentRoute; const { params } = currentRoute;
const toPath = compile(path); const toPath = compile(path);
return toPath(params); return toPath(params);
@@ -40,9 +40,10 @@ const pathCompile = (path: string) => {
const breadcrumbs = ref<BreadcrumbRoute[]>([]); const breadcrumbs = ref<BreadcrumbRoute[]>([]);
// 生成面包屑列表 // 生成面包屑:取路由 matched 中有标题的层级,
// 用 meta.breadcrumb = false 可以隐藏某一级
function getBreadcrumb() { function getBreadcrumb() {
let matched: BreadcrumbRoute[] = currentRoute.matched const matched: BreadcrumbRoute[] = currentRoute.matched
.filter((item) => item.meta && item.meta.title) .filter((item) => item.meta && item.meta.title)
.map(({ path, name, redirect, meta }) => ({ .map(({ path, name, redirect, meta }) => ({
path, path,
@@ -51,25 +52,12 @@ function getBreadcrumb() {
meta, meta,
})); }));
const first = matched[0];
if (!isDashboard(first)) {
matched = [dashboardRoute].concat(matched);
}
breadcrumbs.value = matched.filter((item) => { breadcrumbs.value = matched.filter((item) => {
return item.meta && item.meta.title && item.meta.breadcrumb !== false; return item.meta && item.meta.title && item.meta.breadcrumb !== false;
}); });
} }
// 判断是否为首页路由 // 跳转:有 redirect 走 redirect否则按路径含动态参数先 compile
function isDashboard(route?: BreadcrumbRoute) {
const name = route?.name;
if (!name) {
return false;
}
return name.toString().trim().toLocaleLowerCase() === "Dashboard".toLocaleLowerCase();
}
// 处理面包屑跳转
function handleLink(item: BreadcrumbRoute) { function handleLink(item: BreadcrumbRoute) {
const { redirect, path } = item; const { redirect, path } = item;
if (redirect) { if (redirect) {
@@ -83,6 +71,7 @@ function handleLink(item: BreadcrumbRoute) {
}); });
} }
// 路由变化就重算面包屑,但 /redirect/ 这类中转路由跳过
watch( watch(
() => currentRoute.path, () => currentRoute.path,
(path) => { (path) => {