1

components/Breadcrumb.vue

@@ -0,0 +1,35 @@
+<!--面包屑-->
+<script setup lang="ts">
+import {ArrowRight} from '@element-plus/icons-vue'
+
+withDefaults(
+    defineProps<{
+      data?: any;
+      // 父级栏目
+      categoryName?: string;
+      // 当前栏目
+      title?: string;
+      // 正文
+      detail?: string;
+    }>(),
+    {}
+);
+</script>
+<template>
+  <el-breadcrumb :separator-icon="ArrowRight"  class="py-4">
+    <el-breadcrumb-item :to="{ path: '/' }">
+      <el-icon class="cursor-pointer">
+        <ElIconHouse/>
+      </el-icon>
+    </el-breadcrumb-item>
+    <el-breadcrumb-item>
+      <nuxt-link :to="data.path ? navTo(data) : navTo(data,`/${data.model}/${data.categoryId}.html`)" class="cursor-pointer hover:font-bold">{{ categoryName || data.parentName }}</nuxt-link>
+    </el-breadcrumb-item>
+    <el-breadcrumb-item v-if="detail">
+      <span>{{ detail }}</span>
+    </el-breadcrumb-item>
+    <el-breadcrumb-item v-else>
+      <span>{{ title || data.title }}</span>
+    </el-breadcrumb-item>
+  </el-breadcrumb>
+</template>