|
|
@ -1,15 +1,15 @@ |
|
|
|
<template> |
|
|
|
<div v-if="breadcrumbs.length > 0" class="breadcrumb-container flex-between"> |
|
|
|
<div v-if="breadcrumbs.length > 0" class="breadcrumb-container"> |
|
|
|
<nav> |
|
|
|
<ol class="breadcrumb"> |
|
|
|
<li v-for="(item, index) in breadcrumbs" :key="index" class="breadcrumb-item" |
|
|
|
:class="{ active: index === breadcrumbs.length - 1 }"> |
|
|
|
|
|
|
|
<li |
|
|
|
v-for="(item, index) in breadcrumbs" |
|
|
|
:key="index" |
|
|
|
class="breadcrumb-item" |
|
|
|
:class="{ active: index === breadcrumbs.length - 1 }" |
|
|
|
> |
|
|
|
<template v-if="index !== breadcrumbs.length - 1"> |
|
|
|
<router-link to="/" v-if="item.title == '首页'"> |
|
|
|
<SvgIcon1 :iconPath="require(`@/assets/menu/home-bread.svg`)" defaultColor="#8A9099" :size="16" activeColor="#006AFF"/> |
|
|
|
</router-link> |
|
|
|
<router-link v-else :to="item.path">{{ item.title }}</router-link> |
|
|
|
<router-link :to="item.path">{{ item.title }}</router-link> |
|
|
|
<img class="separator" src="@/assets/separator.png" alt=""> |
|
|
|
</template> |
|
|
|
<template v-else> |
|
|
@ -18,77 +18,83 @@ |
|
|
|
</li> |
|
|
|
</ol> |
|
|
|
</nav> |
|
|
|
<div v-if="breadRightText" class="gap8 breadRight"> |
|
|
|
<img class="ml-8" src="@/assets/site/bind_sites.svg" alt="" /> |
|
|
|
站点简称:<a :href="breadRightText">{{ breadRightText }}</a> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import SvgIcon1 from '@/components/SvgIcon1.vue'; |
|
|
|
import { mapState } from 'vuex'; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'Breadcrumb', |
|
|
|
components: { |
|
|
|
SvgIcon1, |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
breadcrumbs() { |
|
|
|
if (this.$route.meta.hideBreadcrumb) return [] |
|
|
|
if (this.$route.meta.hideBreadcrumb) return []; |
|
|
|
|
|
|
|
const crumbs = [] |
|
|
|
let currentRoute = this.$route |
|
|
|
const crumbs = []; |
|
|
|
let currentRoute = this.$route; |
|
|
|
|
|
|
|
// 递归查找所有父级路由 |
|
|
|
while (currentRoute) { |
|
|
|
crumbs.unshift({ |
|
|
|
// 获取匹配的路由记录 |
|
|
|
// const matchedRoute = this.$router.options.routes.find( |
|
|
|
// r => r.name === currentRoute.name |
|
|
|
// ); |
|
|
|
|
|
|
|
// 构建包含完整参数的对象 |
|
|
|
const routeWithParams = { |
|
|
|
path: currentRoute.path, |
|
|
|
query: currentRoute.query, |
|
|
|
params: currentRoute.params |
|
|
|
}; |
|
|
|
|
|
|
|
crumbs.unshift({ |
|
|
|
path: routeWithParams, |
|
|
|
title: this.getTitle(currentRoute) |
|
|
|
}) |
|
|
|
}); |
|
|
|
|
|
|
|
// 通过 meta.breadcrumbParent 查找父级路由 |
|
|
|
if (currentRoute.meta.breadcrumbParent) { |
|
|
|
currentRoute = this.$router.options.routes.find( |
|
|
|
r => r.name === currentRoute.meta.breadcrumbParent |
|
|
|
) |
|
|
|
); |
|
|
|
|
|
|
|
// 如果找到了父路由,创建一个模拟的$route对象 |
|
|
|
if (currentRoute) { |
|
|
|
currentRoute = { |
|
|
|
...currentRoute, |
|
|
|
path: currentRoute.path, |
|
|
|
query: this.$route.query, // 保留当前查询参数 |
|
|
|
params: this.$route.params, // 保留当前路由参数 |
|
|
|
meta: currentRoute.meta || {} |
|
|
|
}; |
|
|
|
} |
|
|
|
} else { |
|
|
|
currentRoute = null |
|
|
|
currentRoute = null; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
return crumbs |
|
|
|
}, |
|
|
|
...mapState(['breadRightText']) // 从Vuex映射showSidebar状态到组件的计算属性中 |
|
|
|
|
|
|
|
return crumbs; |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
getTitle(route) { |
|
|
|
return typeof route.meta.title === 'function' |
|
|
|
? route.meta.title(route) |
|
|
|
: route.meta.title || route.name |
|
|
|
: route.meta.title || route.name; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
|
|
<style scoped lang="scss"> |
|
|
|
/* 保持之前的样式不变 */ |
|
|
|
.breadcrumb-container { |
|
|
|
padding: 16px 12px; |
|
|
|
background-color: #f5f5f5; |
|
|
|
border-radius: 4px; |
|
|
|
.breadRight{ |
|
|
|
a{ |
|
|
|
text-decoration: none; |
|
|
|
color: #006AFF; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
.home-icon{ |
|
|
|
|
|
|
|
.home-icon { |
|
|
|
width: 16px; |
|
|
|
height: 16px; |
|
|
|
} |
|
|
|
|
|
|
|
.breadcrumb { |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
@ -105,15 +111,18 @@ export default { |
|
|
|
height: 100%; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
.router-link-active{ |
|
|
|
|
|
|
|
.router-link-active { |
|
|
|
height: 100%; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.breadcrumb-item a { |
|
|
|
color: #626573; |
|
|
|
text-decoration: none; |
|
|
|
&:hover{ |
|
|
|
|
|
|
|
&:hover { |
|
|
|
color: #006AFF; |
|
|
|
} |
|
|
|
} |
|
|
|