Cold_putoutstorage_web/src/components/breadcrumb.vue

<template>
    <div class="y-breadcrumb">
        <div class="y-breadcrumb-ico" @click="collapseFun">
            <el-icon v-if="data.iscollapse"><Expand /></el-icon>
            <el-icon v-else><Fold /></el-icon>
        </div>
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item>宝智达</el-breadcrumb-item>
            <el-breadcrumb-item>系统首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{ data.isRouter }}</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>
  
<script lang="ts" setup>
import Bus from '@/plugins/eventBus'
import router from '@/router/index'
import { ArrowRight } from '@element-plus/icons-vue'
import { useStore } from 'vuex';
import { reactive, watch } from 'vue'
let store = useStore()
//当前路由
const data = reactive({
    isRouter: '',
    iscollapse:true
})

watch(() => store.state.switchValue, (toPath: any) => {
  data.iscollapse = store.state.switchValue
}, { immediate: true, deep: true })

watch(() => router, (toPath: any) => {
    data.isRouter = toPath.currentRoute._value.meta.title
}, { immediate: true, deep: true })


const collapseFun = async ()=>{
    data.iscollapse = !data.iscollapse
    Bus.emit('on-click',data.iscollapse);
    store.commit('setswitchValue', data.iscollapse) //存储导航状态
}
</script>
<style lang="scss">
.y-breadcrumb {
    padding-bottom: var(--y-padding);
    display: flex;
    align-items: center;
    &-ico{
        padding-right: 20px;
        display: flex;
        align-items: center;
        font-size: 22px;
        font-weight: 100;
        cursor: pointer;
        color: var(--el-text-color-regular);
    }
}</style>