useHeader
Header 组件导航链接配置 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
586a5 — ✨ feat: 添加 Nuxt 文档主题 layer 核心代码