UI3/src/layouts/main-layout/header/PageTitle.vue

<template>
  <!--begin::Page title-->
  <div class="d-flex">
    <div
      v-if="showBackBtn"
      class="d-flex h-100 justify-content-center align-items-center pe-4"
      style="cursor: pointer"
      @click="router.go(-1)"
    >
      <span class="svg-icon svg-icon-2tx" v-tooltip title="返回" data-bs-trigger="hover" data-bs-placement="bottom">
        <inline-svg :src="getAssetPath('media/icons/duotune/general/gen058.svg')" />
      </span>
    </div>
    <div
      v-if="pageTitleDisplay"
      :class="`page-title d-flex flex-${pageTitleDirection} justify-content-center flex-wrap me-3`"
    >
      <template v-if="pageTitle">
        <!--begin::Title-->
        <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">
          {{ pageTitle }}
        </h1>
        <!--end::Title-->

        <span
          v-if="pageTitleDirection === 'row' && pageTitleBreadcrumbDisplay"
          class="h-20px border-gray-200 border-start mx-3"
        ></span>

        <!--begin::Breadcrumb-->
        <ul
          v-if="breadcrumbs && pageTitleBreadcrumbDisplay"
          class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1"
        >
          <!--begin::Item-->
          <!-- <li class="breadcrumb-item text-muted">
          <router-link to="/" class="text-muted text-hover-primary">Home</router-link>
        </li> -->
          <!--end::Item-->
          <template v-for="(item, i) in breadcrumbs" :key="i">
            <!--begin::Item-->

            <li v-if="i != 0" class="breadcrumb-item">
              <span class="bullet bg-gray-400 w-5px h-2px"></span>
            </li>
            <!--end::Item-->
            <!--begin::Item-->
            <li class="breadcrumb-item text-muted">{{ item }}</li>
            <!--end::Item-->
          </template>
        </ul>
        <!--end::Breadcrumb-->
      </template>
    </div>
    <div v-else class="align-items-stretch"></div>
  </div>
  <!--end::Page title-->
</template>

<script lang="ts" setup>
import { computed } from "vue"
import { getAssetPath } from "@/core/helpers/assets"
import { pageTitleDisplay, pageTitleBreadcrumbDisplay, pageTitleDirection } from "@/core/helpers/config"
import { useRoute, useRouter } from "vue-router"
const route = useRoute()
const router = useRouter()

const showBackBtn = computed(() => {
  return route.query.back && Number(route.query.back) != 0
})

const pageTitle = computed(() => {
  return route.meta.pageTitle
})

const breadcrumbs = computed(() => {
  return route.meta.breadcrumbs
})
</script>