Movk Nuxt Docs

useNavigation

导航结构管理 Composable。

概述

管理文档导航结构，提供导航树处理和面包屑生成功能。

使用示例

基础用法

<script setup lang="ts">
import type { ContentNavigationItem } from '@nuxt/content'

const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
const { rootNavigation, navigationByCategory, findBreadcrumb } = useNavigation(navigation!)

const route = useRoute()
const breadcrumb = computed(() => findBreadcrumb(route.path))
</script>

<template>
  <div>
    <!-- 顶级导航 -->
    <UNavigationMenu :items="rootNavigation" />

    <!-- 侧边栏分类导航 -->
    <UContentNavigation :navigation="navigationByCategory" />

    <!-- 面包屑 -->
    <UBreadcrumb :items="breadcrumb" />
  </div>
</template>

在 Layout 中使用

<script setup lang="ts">
const { data: navigation } = await useAsyncData('navigation', () =>
  fetchContentNavigation()
)

provide('navigation', navigation)

const { navigationByCategory } = useNavigation(navigation!)
</script>

<template>
  <div class="flex">
    <aside>
      <UContentNavigation :navigation="navigationByCategory" />
    </aside>
    <main>
      <slot />
    </main>
  </div>
</template>