sl-sfy-safety/src/components/Breadcrumb.vue

<template>
  <div class="breadcrumb">
    <span v-if="showIcon" class="return-icon" @click="router.back()"
      ><img src="@/assets/icons/rollback.png" alt=""
    /></span>
    <span class="title">{{ title || routeTitle }}</span>
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue';
  import { useRouter, useRoute } from 'vue-router';

  defineProps({
    title: {
      type: String,
      default: '',
    },
    showIcon: {
      type: Boolean,
      default: false,
    },
  });

  const router = useRouter();
  const route = useRoute();
  // 如果没传props的title，就取route的meta.title
  const routeTitle = computed(() => route.meta.title);
</script>

<style scoped lang="scss">
  .breadcrumb {
    // position: sticky;
    // top: 0;
    background: #fff;
    padding: 16px 22px;
    margin-bottom: 10px;
    border-radius: 4px;
    z-index: 999;
    .return-icon {
      cursor: pointer;
    }

    .title {
      margin-left: 10px;
    }
  }
</style>