Nuxt：Head 函数无法正常工作用于标题或元标签。

Question

我有一个使用Nuxt构建的网页，对于不同的页面，我希望在头部具有不同的标题和不同的元描述。我该怎么做？

我在Nuxt文档中找到了head()方法，但这似乎对我没用。

在我的contact.vue文件中：

export default class Contact extends Vue {
   head() {
      return {
         title: 'Contact page',
         meta: [
            { hid: 'description', name: 'description', content: 'This is a contact page' }
         ]
      }
   }
}

在我的 nuxt.config.js 文件中：

head: {
    title: 'My website',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
}

根据文档，我期望这会生成meta标签。但它只显示在nuxt.config.js中声明的标题和meta描述。我错过了什么？

- Cas

Answer 1

我解决了。 在组件中，我将head方法放在类内部。这样行不通。当我将它放在组件装饰器中时，就像这样：

 @Component({
    head(): object {
      return {
        title: this.$i18n.t('meta.home.title'),
        meta: [
          {
            hid: 'description', 
            name: 'description',
            content: this.$i18n.t('meta.home.description') 
          },   
        ]
      }
    }
  })
  export default class Home extends Vue {
   ...
}

它确实起作用了。

起初我遇到了一个错误

Object literal may only specify known objects and 'head' does not exist in type 'ComponentOptions'

通过扩展ComponentOptions来解决此问题：

 declare module "vue/types/options" {
    interface ComponentOptions<V extends Vue> {
      head?: etc etc
    }
  }

- Cas