k_online_ui/src/components/VBreadcrumd/src/VBreadcrumd.vue

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

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

const path = computed(() => {
  const path = route.path
  // 检查URL中是否包含'detail'
  if (path.includes('/detail')) {
    // 获取'detail'的位置
    const detailIndex = path.indexOf('/detail')
    // 从开始到'/detail'前一个'/'的位置的子串
    const lastSlashIndex = path.lastIndexOf('/', detailIndex - 1)
    // 如果找到了'/'
    if (lastSlashIndex !== -1) {
      // 获取上一段字符串
      return path.substring(lastSlashIndex + 1, detailIndex)
    }
  } else if (path.includes('/add-vgm')) {
    const detailIndex = path.indexOf('/add-vgm')
    const lastSlashIndex = path.lastIndexOf('/', detailIndex - 1)
    if (lastSlashIndex !== -1) {
      return path.substring(lastSlashIndex + 1, detailIndex)
    }
  }
  // 如果没有找到或者不符合条件，则返回null
  return null
})

const mapPathName = {
  booking: 'Booking',
  tracking: 'Tracking',
  'public-tracking': 'Public Tracking'
}
const handleGoBack = () => {
  router.push({ path: '/' + path.value })
}
const pathName = computed(() => {
  return mapPathName[path.value]
})
</script>

<template>
  <div class="v-breadcrumd" v-if="path">
    <span class="font_family icon-icon_back_b" @click="handleGoBack"></span>
    <span style="color: var(--color-neutral-3)">{{ pathName }}</span>
    <span class="interval">|</span>
    <span style="font-weight: 700">Detail</span>
  </div>
  <div v-else></div>
</template>

<style lang="scss" scoped>
.v-breadcrumd {
  display: flex;
  align-items: center;
  gap: 4px;
  .icon-icon_back_b {
    font-size: 18px;
    cursor: pointer;
  }
  .interval {
    margin: 0 2px;
    color: var(--color-neutral-3);
    transform: rotate(20deg);
  }
}
</style>