用 vue3 写一个面包屑导航

你好！非常感谢你的提问。以下是使用 Vue3 编写面包屑导航的示例代码：

<template>
  <div class="breadcrumbs">
    <ul>
      <li v-for="(link, index) in links" :key="`breadcrumb_${index}`">
        <a :href="link.url">{{ link.label }}</a>
      </li>
    </ul>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Breadcrumbs',
  props: {
    links: {
      type: Array,
      default: () => [],
    },
  },
});
</script>

<style scoped>
.breadcrumbs {
  margin: 0;
  padding: 0;
  font-size: 14px;
}

.breadcrumbs ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.breadcrumbs ul li {
  display: inline-block;
  margin-right: 5px;
}

.breadcrumbs ul li:last-child {
  margin-right: 0;
}
</style>

在此示例中，我们首先使用 `defineComponent` 方法定义了一个名为 `Breadcrumbs` 的组件。接下来，我们定义了一个 `links` 属性，该属性是一个数组，用于保存要显示的链接和标签。

在模板中，我们创建了一个包含链接的无序列表，并使用 `v-for` 指令为每个链接创建了一个列表项。链接的 URL 和标签都是通过从 `links` 属性中获取的。

最后，我们针对此组件添加了一些简单的 CSS 样式，以确保面包屑导航看起来更整齐。

希望能够帮到你，如有疑问，请随时在评论区留言。