用 vue3 写一个面包屑导航 易懂

好的，可以很容易地使用 Vue 3 写一个面包屑导航。我建议使用Vue Router来处理路由器功能。以下是一个示例：

在template中：

<!-- 面包屑导航 -->
<ul class="breadcrumb">
  <li>
    <router-link to="/">首页</router-link>
  </li>
  <li v-for="(crumb, index) in crumbs" :key="index">
    <router-link :to="{ path: crumb.path }">{{ crumb.title }}</router-link>
  </li>
</ul>

在script中：

import { onMounted, reactive } from 'vue'
import router from '@/router'

export default {
  setup() {
    const crumbs = reactive([])
    
    // 监听路由变化并重新生成面包屑
    const generateCrumbs = () => {
      crumbs.length = 0 // 清空数组
      const routes = router.currentRoute.value.matched
      routes.forEach(item => {
        const title = item.meta.title
        if (title) {
          crumbs.push({
            title: title,
            path: item.path,
          })
        }
      })
    }

    onMounted(() => {
      generateCrumbs()
      router.afterEach(() => {
        generateCrumbs()
      })
    })

    return {
      crumbs,
    }
  }
}

欢迎进一步问我任何关于开发的问题!