vue-meta => 如何改变头部信息

Question

我有一个 nuxtjs 项目，在 url 上打开一个页面，例如 server\posts\id。在此页面上，我添加了 head 信息来影响元标记。但是，有些标签是 post 特定的，需要动态填充。这似乎只有在 mounted 中加载数据后才有可能。如何将元操作添加到 mounted？

Answer 1

看来您需要额外的 'data' 属性。如果您在 header 中使用它并在以后更新它，它将更改元信息。

Answer 2

从 api 获取元数据的正确方法是：使用 fetch 方法

  async fetch({ store, params }) {
    await store.dispatch('modules/item/get_item', params.article)
  },

使用计算：

  computed: {
    ...mapState('modules/item', {
      Item: (state) => state.data
    })
  },

并使用 nuxt head (vue-meta)

head() {
    return {
      title:
        this.$store.state.modules.general.info.name + ' / ' + this.Item.title,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content:
            this.$store.state.modules.general.info.name +
            ' / ' +
            this.Item.seo_description
        },
  }

vue-meta => 如何改变头部信息

vue-meta => How to change the header information

vuejs2

nuxt.js