jiaqingjiayi-Web/src/views/layout/header/breadcrumb.vue

<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item v-for="(item,index) in breadcrumbList" :key="index">
<!--      <span class="redirect" v-if="item.name=='详情'||item.name=='商品管理'" @click="handleRedirectBack(item.name)">返回上一级</span>-->
 <span class="no-redirect" v-if="index==breadcrumbList.length-1" >{{ item.name }}</span>
      <span class="redirect" v-else @click="handleRedirect(item.path)">{{ item.name }}</span>
<!--      <span class="redirect" v-else @click="handleRedirectBack">返回上一级</span>-->

    </el-breadcrumb-item>
  </el-breadcrumb>

</template>
<script setup>
import {ref, watch} from 'vue'
import {useRoute, useRouter} from 'vue-router'

const route = useRoute();
const router = useRouter();

const breadcrumbList = ref([]);

const handleRedirectBack=(name)=>{
  if (name=='详情')
  {
    router.push('/employee')
  }else{
    router.push('/business')
  }


}
const handleRedirect = (path) => {
  router.push('/home')
}

const initBreadcrumbList = () => {
  breadcrumbList.value = route.matched;
}
watch(route, () => {
  initBreadcrumbList();
  console.log(route.matched)
  //console.log("breadcrumbList"+JSON.stringify(breadcrumbList))
}, {deep: true, immediate: true})
</script>
<style lang="scss" scoped>
.no-redirect {
  cursor: text;
}

.redirect {
  color: #666;
  font-weight: 600;
  cursor: pointer;

  &:hover {
    color: #304156
  }
}
</style>