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>标记相匹配，因此在每个页面上独立地重新定义每个标记都是没有意义的。

期望解

我希望有一种解决方案，允许我在我的layouts/default.vue文件中甚至在nuxt.config.js中定义layouts/default.vue标记。就像这样：

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

Layout.vue不能直接从Page.vue访问nuxt数据。

为了在它们之间共享数据，您必须使用Store。

请参阅https://nuxtjs.org/guide/vuex-store/

关于初始请求，可以使用Mixin在每个Page.vue上共享元配置。

请参阅https://v2.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插件创建一个全局混合器：

// plugins/meta.js

import Vue from 'vue'

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

并在每一页上声明您的新插件：

// nuxt.config.js

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