使用vue3项目中pinia写面包屑

在使用 Vue 3 和 Pinia 的项目中实现面包屑需要以下步骤：

1. 创建一个 store，用于存储面包屑的信息，比如当前页面的路径和名称等。

import { defineStore } from 'pinia'

export const useBreadcrumbsStore = defineStore({
  id: 'breadcrumbs',
  state: () => ({
    breadcrumbs: [],
  }),
  actions: {
    setBreadcrumbs(breadcrumbs) {
      this.breadcrumbs = breadcrumbs
    },
  },
})

2. 在需要显示面包屑的组件中，可以使用 computed 属性来获取 store 中的面包屑信息，并渲染到页面中。

<template>
  <div>
    <ul>
      <li v-for="(breadcrumb, index) in breadcrumbs" :key="index">
        <router-link :to="breadcrumb.path">{{ breadcrumb.name }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import { computed } from 'vue'
import { useBreadcrumbsStore } from '@/stores/breadcrumbs'

export default {
  name: 'Breadcrumbs',
  setup() {
    const breadcrumbsStore = useBreadcrumbsStore()
    const breadcrumbs = computed(() => breadcrumbsStore.breadcrumbs)

    return { breadcrumbs }
  },
}
</script>

3. 在路由中设置钩子函数，每次路由切换时更新面包屑信息。

import { useBreadcrumbsStore } from '@/stores/breadcrumbs'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      breadcrumbs: [{ path: '/', name: 'Home' }],
    },
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    meta: {
      breadcrumbs: [
        { path: '/', name: 'Home' },
        { path: '/about', name: 'About' },
      ],
    },
  },
  // ...
]

router.beforeEach((to, from, next) => {
  const breadcrumbsStore = useBreadcrumbsStore()
  const breadcrumbs = to.meta.breadcrumbs || []

  breadcrumbsStore.setBreadcrumbs(breadcrumbs)

  next()
})

上述代码中，我们在路由配置中设置了 meta 属性，用于存储当前页面的面包屑信息。在路由钩子函数中，我们通过 useBreadcrumbsStore() 创建了面包屑 store 的实例，并调用 setBreadcrumbs() 方法更新 store 中的面包屑信息。这样，在组件中使用 computed 属性就可以获取到最新的面包屑信息并进行渲染了。

希望这个示例可以帮助你实现面包屑功能。