通用中后台框架第一版

web/src/components/AppBreadcrumb.vue

@@ -0,0 +1,23 @@
+<template>
+  <n-breadcrumb>
+    <n-breadcrumb-item v-for="item in crumbs" :key="item.path">
+      {{ item.title }}
+    </n-breadcrumb-item>
+  </n-breadcrumb>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+
+const crumbs = computed(() =>
+  route.matched
+    .filter((item) => item.meta?.title)
+    .map((item) => ({
+      path: item.path,
+      title: item.meta.title as string
+    }))
+)
+</script>