breadcrumb.vue 558 B

1234567891011121314151617181920212223
  1. <template>
  2. <a-breadcrumb >
  3. <a-breadcrumb-item v-for="item in breadcrumbs" :key="item.path" >
  4. <a :href="item.path">{{item.name}}</a>
  5. </a-breadcrumb-item>
  6. </a-breadcrumb>
  7. </template>
  8. <script lang="ts" setup >
  9. import { computed } from 'vue'
  10. import { useRoute } from 'vue-router'
  11. import { routes } from '@/router/'
  12. const route = useRoute()
  13. console.log('route.matched:', route)
  14. const breadcrumbs = computed(() => {
  15. return route.matched.map((route) => ({
  16. path: route.path,
  17. name: route.name
  18. }))
  19. })
  20. </script>