Vue3 通过vueuse/head 设置meta标签,实现seo优化,实现动态title

安装包

 yarn add @vueuse/head

main.js

import {createHead} from "@vueuse/head"
import {createApp} from 'vue'
const app = createApp(App)
app.use(createHead())

App.vue 设置全局meta标签

<template>
        <router-view/>
</template>
<script>
import {useSeoMeta} from '@vueuse/head'
export default {
  name: 'App',
  setup() {
    useSeoMeta({
      // Can be static or computed
      title: "我是网站名字",
      description: `我是网站介绍`,
      generator: '使用什么语言编写',
      distribution: "global",
      keywords: "关键字",
      charset: "UTF-8",
      viewport: "width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"
    })
  }
}
</script>

设置动态meta,动态title

<template>
</template>
<script>
import {computed, reactive} from 'vue'
import {useSeoMeta} from '@vueuse/head'
const siteData = reactive({})
export default {
name: "detal",
setup() {
useSeoMeta({
// Can be static or computed
title: computed(() => siteData.title),
description: computed(() => siteData.description),
keywords: computed(() => siteData.keywords),
ogImage: computed(() => siteData.ogImage),
ogTitle: computed(() => siteData.ogTitle)
})
},
created() {
// 从后台接口获取title,description 等等
getById(this.vodId).then(response =&gt; {

  siteData.title = response.title
  siteData.description = response.description
  siteData.ogImage = response.ogImage
  siteData.ogTitle = response.ogTitle
}).catch(() =&gt; {
})
}
}
</script>
<style scoped>
</style>