Vue.js项目中如何用Vue Unhead/Vue Meta动态设置元标签

你已经完成了Vue Unhead的基础配置，接下来只需利用它提供的useHead组合式API，配合响应式数据就能实现meta信息的动态更新，包括社交平台分享必需的Open Graph标签。

步骤1：改造详情页组件代码 #

在详情页组件中引入useHead和响应式变量，绑定并动态更新meta内容：

<script setup>
import { onMounted, ref } from "vue";
import axios from "axios";
import { useHead } from '@unhead/vue'

// 声明响应式变量存储meta数据，可设置默认值
const pageTitle = ref('默认详情页标题')
const pageDesc = ref('默认详情页描述')
const pageImage = ref('默认图片地址')

// 用useHead绑定meta标签，函数形式的content会随响应式变量自动更新
useHead({
  title: () => pageTitle.value,
  meta: [
    {
      name: 'description',
      content: () => pageDesc.value,
    },
    // Open Graph标签，是社交平台识别分享信息的核心
    {
      property: 'og:title',
      content: () => pageTitle.value,
    },
    {
      property: 'og:description',
      content: () => pageDesc.value,
    },
    {
      property: 'og:image',
      content: () => pageImage.value,
    },
    // 可选：添加Twitter卡片标签优化推特分享
    {
      name: 'twitter:title',
      content: () => pageTitle.value,
    },
    {
      name: 'twitter:description',
      content: () => pageDesc.value,
    },
    {
      name: 'twitter:image',
      content: () => pageImage.value,
    }
  ]
})

onMounted(() => {
  fetchOperatorDetail();
});

function fetchOperatorDetail() {
  axios.get(
    `api/route`,
    {
      headers: {
        'time_zone': timeZone,
      }
    }
  ).then((response) => {
    if (Object.keys(response.data.data).length > 0) {
      const data = response.data.data
      // 给响应式变量赋值，自动触发meta标签更新
      pageTitle.value = data.title // 替换为你API返回的标题字段
      pageDesc.value = data.description // 替换为你API返回的描述字段
      pageImage.value = data.imageUrl // 替换为你API返回的图片地址，必须是完整HTTP/HTTPS链接
    }
  });
}
</script>

关键细节 #

• 图片地址必须是完整的HTTP/HTTPS链接，否则社交平台无法加载分享图片。
• useHead的content支持函数形式，能自动追踪响应式变量变化，无需手动触发更新。
• 仅设置普通的title和description不足以满足社交平台分享需求，必须配置Open Graph（og:前缀）标签。

路由切换的重置处理 #

如果需要在离开详情页时恢复默认meta内容，可以在组件中添加卸载钩子：

import { onUnmounted } from "vue";

onUnmounted(() => {
  pageTitle.value = '默认详情页标题'
  pageDesc.value = '默认详情页描述'
  pageImage.value = '默认图片地址'
})

备选方案：换回Vue Meta的实现方式 #

如果你想启用注释掉的Vue Meta，步骤如下：
11. 取消main.js中createMetaManager()的注释，启用Vue Meta插件
2. 在详情页中用useMeta绑定数据：

import { useMeta } from 'vue-meta'

// 声明响应式变量后，绑定meta
useMeta(() => ({
  title: pageTitle.value,
  meta: [
    { name: 'description', content: pageDesc.value },
    { property: 'og:title', content: pageTitle.value },
    // ...其他OG标签
  ]
}))

注意事项 #

客户端渲染模式下，部分社交平台爬虫可能不会执行JS，导致无法抓取动态生成的meta信息。如果需要确保分享100%正常识别，建议采用服务器端渲染（SSR）、静态站点生成（SSG），或使用预渲染工具提前生成静态meta内容。

内容的提问来源于stack exchange，提问作者Shashank Shah