元标签

您可以通过几种不同的方式为您的网站自定义元标签：

组合式api useMeta

在您的setup函数中，您可以useMeta使用元属性的对象调用与元标记对应的键：title, base, script, style, metaand link, 以及htmlAttrs和 bodyAttrs。或者，您可以传递一个返回响应式元数据对象的函数。

例如：

  1. export default {
  2.   setup () {
  3.     useMeta({
  4.       meta: [
  5.         { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1' }
  6.       ],
  7.       bodyAttrs: {
  8.         class: 'test'
  9.       }
  10.     })
  11.   }
  12. }

元组件

Nuxt提供<Title>，<Base>，<Script>，<Style>，<Meta>，<Link>，<Body>，<Html>和<Head>组件，以便您可以直接与您的组件的模板中的元数据进行交互。

由于这些组件名称与原生 HTML 元素匹配，因此在 模板中将它们大写非常重要。

<Head>和<Body>可以接受嵌套元标记（出于审美原因），但这对嵌套元标记在最终 HTML 中的呈现位置没有影响。

例如：

  1. <template>
  2.   <div>
  3.     Hello World
  4.     <Html :lang="dynamic > 50 ? 'en-GB' : 'en-US'">
  5.       <Head>
  6.         <Title>{{ dynamic }} title</Title>
  7.         <Meta name="description" :content="`My page's ${dynamic} description`" />
  8.         <Link rel="preload" href="/test.txt" as="script" />
  9.       </Head>
  10.     </Html>
  12.     <button class="blue" @click="dynamic = Math.random() * 100">
  13.       Click me
  14.     </button>
  15.   </div>
  16. </template>
  18. <script>
  19. export default {
  20.   data: () => ({ dynamic: 49 })
  21. }
  22. </script>