metainfo vue 有例子吗

当然有例子！以下是一个使用 MetaInfo Vue 的示例代码：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
  </div>
</template>

<script>
import { MetaInfo } from 'vue-meta'

export default {
  name: 'MyComponent',
  metaInfo() {
    return {
      title: 'My Page Title',
      meta: [
        {
          name: 'description',
          content: 'This is my page description.'
        },
        {
          property: 'og:title',
          content: 'My Open Graph Title'
        },
        {
          property: 'og:description',
          content: 'This is my Open Graph description.'
        }
      ]
    }
  },
  data() {
    return {
      title: 'Welcome to my website!',
      description: 'This is a website about...',
    }
  }
}
</script>

在上面的代码中，我们首先导入了 `vue-meta` 库，然后在组件中定义了 `metaInfo` 函数来设置元标记和头部标记。在这个函数中，我们设置了页面的标题、描述和 Open Graph 标记。此外，我们还使用了组件中的 `data` 函数来设置页面的内容。

当这个组件被渲染时，`vue-meta` 库会自动将设置的元标记和头部标记添加到页面中，这样就可以更好地控制页面的搜索引擎优化和社交分享效果了。