使用@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'

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）中使用

import { useHead } from '@unhead/vue'

useHead({

title: '首页标题',

meta: [

{ name: 'keywords', content: '关键词1,关键词2' },

{ name: 'description', content: '页面描述' }

]

})
</script>

注意：useHead 必须在 <script setup> 顶层调用，不能放在 onMounted 或函数里。

微信小程序