46 lines
1.4 KiB
Vue
46 lines
1.4 KiB
Vue
<!--
|
|
* @Description:
|
|
* @Author: zenghua.wang
|
|
* @Date: 2023-06-20 14:29:45
|
|
* @LastEditors: zenghua.wang
|
|
* @LastEditTime: 2025-02-13 16:02:18
|
|
-->
|
|
<template>
|
|
<el-breadcrumb class="layout-breadcrumb" separator="/">
|
|
<transition-group name="breadcrumb">
|
|
<el-breadcrumb-item v-if="matched[0].meta.title !== '首页'" key="home" :to="{ path: '/' }">
|
|
<div class="layout-breadcrumb-item">
|
|
<span class="layout-breadcrumb-title">首页</span>
|
|
</div>
|
|
</el-breadcrumb-item>
|
|
<el-breadcrumb-item v-for="(item, index) in matched" :key="item.name">
|
|
<span v-if="item.redirect === 'noRedirect' || index == matched.length - 1" class="no-redirect">{{ item.meta.title }}</span>
|
|
<a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
|
|
</el-breadcrumb-item>
|
|
</transition-group>
|
|
</el-breadcrumb>
|
|
</template>
|
|
|
|
<script setup name="layout-breadcrumb">
|
|
import { computed } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
|
|
const handleLink = (item) => {
|
|
router.push({
|
|
path: item.path,
|
|
});
|
|
};
|
|
|
|
const matched = computed(() => route.matched.filter((item) => item.meta && item.meta.title && item.meta.breadcrumb !== false));
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.layout-breadcrumb {
|
|
@include flex-row();
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
}
|
|
</style>
|