Nuxt3如何根据路由、useHead title，制作一个面包屑导航？

在 Nuxt.js 中，您可以使用 Vue.js 组合 API 中的 useRoute 挂钩来访问当前路由，并使用 useHead 挂钩来访问和更新特定页面的头部元信息。 通过组合这两个钩子，您可以创建一个动态面包屑导航，它根据当前路线和每个页面的相应标题进行更新。

以下是如何使用这些挂钩创建动态面包屑导航的示例：

<template>
  <div>
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item" v-for="(item, index) in breadcrumbs" :key="index">
          <nuxt-link :to="item.path">{{ item.name }}</nuxt-link>
        </li>
      </ol>
    </nav>
  </div>
</template>

<script>
import { useRoute, useHead } from '@nuxt/vue-app'

export default {
  setup () {
    const route = useRoute()
    const { set } = useHead()

    set({
      title: route.meta.title
    })

    const breadcrumbs = []
    if (route.meta.breadcrumb) {
      breadcrumbs.push({
        name: route.meta.breadcrumb.name,
        path: route.meta.breadcrumb.path
      })
    }

    return {
      breadcrumbs
    }
  }
}
</script>

在此示例中，我们使用 useRoute 挂钩访问当前路由，并使用 useHead 挂钩访问和更新页面的头部元信息。 head 元信息使用当前路由的元属性中的标题进行更新。

我们还创建了一个面包屑数组，其中填充了当前路线的面包屑元信息。 然后通过遍历面包屑数组并使用 nuxt-link 组件链接到导航中的每个页面来创建面包屑导航。

要在页面中使用此组件，您只需将其包含在模板中，并在相应的页面组件或页面级元数据中为每个页面配置面包屑元信息。

文章版权归 有个狸 所有，未经许可不得转载，责任编辑：有个狸。