useHeader

GitHub查看源码
useHeader 用于配置头部导航链接，通过 desktopLinks 定义桌面端菜单项，支持当前路由高亮检测。在 app/composables/useHeader.ts 中创建同名文件覆盖此 Composable，即可完全自定义头部导航结构和链接内容。

概述

useHeader() 配置 Header 组件的桌面端和移动端导航链接。

默认实现

默认返回空数组：

composables/useHeader.ts
export function useHeader() {
  return {
    desktopLinks: computed(() => []),
    mobileLinks: computed(() => [])
  }
}

使用示例

覆盖默认配置

在项目中创建 composables/useHeader.ts 覆盖默认配置：

composables/useHeader.ts
export function useHeader() {
  const route = useRoute()

  return {
    desktopLinks: computed(() => [
      {
        label: '文档',
        to: '/docs',
        icon: 'i-lucide-book',
        active: route.path.startsWith('/docs')
      },
      {
        label: 'API',
        to: '/api',
        icon: 'i-lucide-code',
        active: route.path.startsWith('/api')
      }
    ]),

    mobileLinks: computed(() => [
      {
        label: '首页',
        to: '/',
        icon: 'i-lucide-square-play'
      },
      {
        label: '文档',
        to: '/docs',
        icon: 'i-lucide-book'
      }
    ])
  }
}

多语言支持

composables/useHeader.ts
export function useHeader() {
  const { t } = useI18n()

  return {
    desktopLinks: computed(() => [
      {
        label: t('nav.docs'),
        to: '/docs',
        icon: 'i-lucide-book'
      },
      {
        label: t('nav.api'),
        to: '/api',
        icon: 'i-lucide-code'
      }
    ]),

    mobileLinks: computed(() => [
      {
        label: t('nav.home'),
        to: '/',
        icon: 'i-lucide-square-play'
      },
      {
        label: t('nav.docs'),
        to: '/docs',
        icon: 'i-lucide-book'
      }
    ])
  }
}

API

useHeader()

返回 Header 导航链接配置。

返回值

desktopLinks
ComputedRef<NavigationLink[]>
桌面端导航菜单项。
mobileLinks
ComputedRef<NavigationLink[]>
移动端导航菜单项。

链接对象字段

label
string required
显示文本。
to
string required
链接地址。
icon
string
图标类名。
active
boolean
是否激活状态。
badge
string
徽章文本。
children
NavigationLink[]
子菜单。

Changelog

No recent changes

PageLastCommit

PageLastCommit 在文档页面标题下方自动显示最后更新时间、提交作者和 commit message，支持 PR squash merge 场景下的自动作者识别。需配置 NUXT_GITHUB_TOKEN 和 github.rootDir，支持 Intl.DateTimeFormatOptions 自定义日期格式。

useNavigation

useNavigation 管理文档侧边栏导航树结构，提供按分类分组的子导航列表、根级导航项集合和面包屑导航数据。基于 Nuxt Content 的 queryCollectionNavigation API 构建，配合 useCategory 使用实现侧边栏分组导航。

Copyright © 2024 - 2026