用 vue3 写一个面包屑导航

好的，我可以为您提供一些基本的思路和代码示例。首先，您需要在 Vue3 中安装 vue-router，以便使用路由功能。

在您的组件中，您可以使用计算属性来获取当前页面的路由信息，然后将其递归拼接成面包屑导航。

下面是一个基本的示例代码，您需要根据您的项目需求进行相应的修改和补充：

<template>
  <nav class="breadcrumb">
    <ul>
      <li>
        <router-link to="/">首页</router-link>
      </li>
      <li v-for="(crumb, index) in crumbs" :key="index">
        <router-link :to="crumb.to">{{ crumb.name }}</router-link>
      </li>
    </ul>
  </nav>
</template>

<script>
import { useRoute } from 'vue-router'

export default {
  name: 'Breadcrumb',
  setup() {
    const route = useRoute()

    const crumbs = []

    const getFullPath = (path) => {
      return path
        .split('/')
        .filter((p) => p)
        .map((p, index, arr) => {
          const fullPath = `/${arr.slice(0, index + 1).join('/')}`
          const name = p.charAt(0).toUpperCase() + p.slice(1)
          return { name, to: fullPath }
        })
    }

    crumbs.push(...getFullPath(route.path))

    return { crumbs }
  },
}
</script>

请注意，上面的代码仅提供了基本的面包屑导航功能，您还可以根据需要进行样式、动画等方面的美化和改进。希望能够帮助到您。