You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
117 lines
2.6 KiB
117 lines
2.6 KiB
<template>
|
|
<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 }">
|
|
|
|
<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"/>
|
|
<!-- <img class="home-icon" src="@/assets/menu/home-bread.svg" alt="首页"> -->
|
|
</router-link>
|
|
<router-link v-else :to="item.path">{{ item.title }}</router-link>
|
|
<img class="separator" src="@/assets/separator.png" alt="">
|
|
</template>
|
|
<template v-else>
|
|
<span>{{ item.title }}</span>
|
|
</template>
|
|
</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import SvgIcon1 from '@/components/SvgIcon1.vue';
|
|
export default {
|
|
name: 'Breadcrumb',
|
|
components: {
|
|
SvgIcon1,
|
|
},
|
|
computed: {
|
|
breadcrumbs() {
|
|
if (this.$route.meta.hideBreadcrumb) return []
|
|
|
|
const crumbs = []
|
|
let currentRoute = this.$route
|
|
|
|
// 递归查找所有父级路由
|
|
while (currentRoute) {
|
|
crumbs.unshift({
|
|
path: currentRoute.path,
|
|
title: this.getTitle(currentRoute)
|
|
})
|
|
|
|
// 通过 meta.breadcrumbParent 查找父级路由
|
|
if (currentRoute.meta.breadcrumbParent) {
|
|
currentRoute = this.$router.options.routes.find(
|
|
r => r.name === currentRoute.meta.breadcrumbParent
|
|
)
|
|
} else {
|
|
currentRoute = null
|
|
}
|
|
}
|
|
|
|
return crumbs
|
|
}
|
|
},
|
|
methods: {
|
|
getTitle(route) {
|
|
return typeof route.meta.title === 'function'
|
|
? route.meta.title(route)
|
|
: route.meta.title || route.name
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.breadcrumb-container {
|
|
padding: 16px 12px;
|
|
background-color: #f5f5f5;
|
|
border-radius: 4px;
|
|
}
|
|
.home-icon{
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
.breadcrumb {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
height: 22px;
|
|
align-items: center;
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.breadcrumb-item {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
}
|
|
.router-link-active{
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.breadcrumb-item a {
|
|
color: #626573;
|
|
text-decoration: none;
|
|
&:hover{
|
|
color: #006AFF;
|
|
}
|
|
}
|
|
|
|
.breadcrumb-item.active span {
|
|
color: #1E2226;
|
|
;
|
|
|
|
}
|
|
|
|
.separator {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
</style>
|