diff --git a/src/components/BreadCrumb/index.vue b/src/components/BreadCrumb/index.vue
index 4a3b71d450ceb87d829f9bd98c7683b35d3047bc..576bdbb516363040a357b79da3921468f72c9e25 100644
--- a/src/components/BreadCrumb/index.vue
+++ b/src/components/BreadCrumb/index.vue
@@ -1,13 +1,34 @@
 <template>
-  <div class="app-breadcrumb"><home theme="filled" /> breadcrumb</div>
+  <div class="app-breadcrumb">
+    <a-breadcrumb :routes="routes">
+      <template #itemRender="{ route, routes, paths }">
+        <span v-if="routes.indexOf(route) === routes.length - 1">
+          <home />
+          {{ route.breadcrumbName }}
+        </span>
+        <router-link v-else :to="`${paths.join('/')}`">
+          <home />
+          {{ route.breadcrumbName }}
+        </router-link>
+      </template>
+    </a-breadcrumb>
+  </div>
 </template>
 
 <script lang="ts">
+import { defineComponent, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
 import { Home } from '@icon-park/vue-next'
-
-import { defineComponent } from 'vue'
 // import { useStore } from 'vuex'
 // import { Breadcrumb } from '/@/store/modules/app'
+interface Route {
+  path: string
+  breadcrumbName: string
+  children?: Array<{
+    path: string
+    breadcrumbName: string
+  }>
+}
 
 export default defineComponent({
   name: 'BreadCrumb',
@@ -17,12 +38,34 @@ export default defineComponent({
 
   setup() {
     // const store = useStore()
+    const route = useRoute()
+    const routes = ref<Route[]>([])
+    const getbreadcrumbList = () => {
+      const matched = route.matched.filter(
+        (item) => item.meta && item.meta.title && item.meta.title !== 'dashboard',
+      )
+      console.log(matched)
+      routes.value = []
+      matched.forEach((item) => {
+        routes.value.push({
+          path: item.path,
+          breadcrumbName: String(item.meta.title),
+        })
+      })
+    }
+    getbreadcrumbList()
+    watch(
+      () => route.path,
+      () => {
+        getbreadcrumbList()
+      },
+    )
 
     // const breadcrumbList = computed<Breadcrumb[]>(() => store.state.app.breadcrumbList)
-    const breadcrumbList = []
 
     return {
-      breadcrumbList,
+      basePath: '/',
+      routes,
     }
   },