2

我正在使用 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 布局是否可以引用特定于页面的数据？

4

1 回答 1

2

ALayout.vue不能直接从 a 访问 nuxt 数据Page.vue。
您必须使用 aStore才能在它们之间共享数据。
见https://nuxtjs.org/guide/vuex-store/

关于您的初始请求，您可以使用 aMixin在每个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'],
于 2019-12-07T15:19:46.370 回答