Nuxt.js：如何从布局中引用页面数据？ （例如，填充og：title标签）

Question

我正在使用Nuxt.js生成静态页面。我希望每个页面都具有唯一的<title>标签和<meta property="og:title" ... >标签。

当前实施

我目前有一个生成这些标签的丑陋解决方案。我有两个看起来像这样的页面：

pages/foo.vue

export default {
  head: {
    title: 'Foo',
    meta: [
      {
        property: 'og:title',
        content: 'Foo',
      },
    ],
  }
};

pages/bar.vue

export default {
  head: {
    title: 'Bar',
    meta: [
      {
        property: 'og:title',
        content: 'Bar',
      },
    ],
  }
};

问题

这将为我的每个页面正确生成<meta property="og:title" ...>标签，但它迫使我在所有页面上都包含冗余代码。我的og:title标记始终与我的<title>标记匹配，因此没有必要在每个页面上独立地重新定义它们。

所需解决方案

我很喜欢一个允许我在og:title文件甚至layouts/default.vue中定义nuxt.config.js标签的解决方案。像这样的东西：

layouts/default.vue

export default {
  head() {
    return {
      meta: [
        {
          property: 'og:title',
          content: this.$page.head.title, // <-- This variable doesn't really exist
        }
      ],
    };
  },
};

pages/foo.vue

export default {
  head: { title: 'Foo' }
};

pages/bar.vue

export default {
  head: { title: 'Bar' }
};

问题

这里可以取消样板吗？

更一般而言，Nuxt布局是否可以引用特定于页面的数据？

Answer 1

A Layout.vue无法直接从Page.vue访问nuxt数据。您必须使用Store以便在它们之间共享数据。参见https://nuxtjs.org/guide/vuex-store/

---

关于您的初始请求，您可以使用Mixin在每个Page.vue上共享您的元配置。参见https://vuejs.org/v2/guide/mixins.html

例如

// mixins/meta.vue

<script>
export default {
  data () {
    return {
      title: null,
      description: null
    }
  },
  head () {
   return {
     title = this.title
     meta = [
      { hid: 'description', name: 'description', content: this.description },
      { hid: 'og:title', property: 'og:title', content: this.title },
      // ...
    ]
  }
}
</script>

// <Page>.vue with local mixin

<script>
import Meta from '~/mixins/meta'

export default {
  mixins: [Meta], // local mixin
  asyncData () {
    return {
      title: "Foo",
      description: "lorem ipsum",
    }
  }
}
</script>

或使用Nuxt插件创建全局mixin：

// plugins/meta.js

import Vue from 'vue'

Vue.mixin({
  data: { // ... }
  head: { // ...}
})

并声明要在每个页面上应用的新插件：

// nuxt.config.js

plugins: ['~/plugins/meta'],