Vue
使用@unhead/vue动态设置Vue项目网页title、keywords等
08-28 10:18@unhead/vue 是一个专为 Vue 应用设计的、用于管理网页 <head> 部分内容的官方库。简单来说，它让你能在 Vue 组件中动态、响应式地控制页面的标题（<title>）、Meta 标签（<meta>）、Link 标签等。
1、安装@unhead/vue
npm install @unhead/vue
2. 在 main.ts 中注册
import { createApp } from 'vue'
// createHead 从 @unhead/vue/client 导入，不要从 @unhead/vue 直接导入（那是服务端用的）
import { createHead } from '@unhead/vue/client'
import App from './App.vue'
const app = createApp(App)
const head = createHead()
app.use(head)
app.mount('#app')
3. 在页面组件（如 Home.vue）中使用
<script setup>
import { useHead } from '@unhead/vue'
useHead({
title: '首页标题',
meta: [
{ name: 'keywords', content: '关键词1,关键词2' },
{ name: 'description', content: '页面描述' }
]
})
</script>
注意：useHead 必须在 <script setup> 顶层调用，不能放在 onMounted 或函数里。
4 、如果标题需要根据路由变化，配合 useRoute 和 computed：
<script setup>
import { useHead } from '@unhead/vue'
import { useRoute } from 'vue-router'
import { computed } from 'vue'
const route = useRoute()
const headData = computed(() => ({
title: route.meta.title || '默认标题',
meta: [
{ name: 'keywords', content: route.meta.keywords || '' },
{ name: 'description', content: route.meta.description || '' }
]
}))
useHead(headData)
</script>
