Question

我正在使用NuxtJS的head标签。我的应用程序中的meta标记经常重复或只有很小的变化。

我想将标题传递给mixin，然后将代码重新用于应用程序中的所有页面。但是，我不确定如何在vuejs中执行此操作。有什么建议吗？

export const metatags = {
  head () {
    const organization = this.$store.state.loadedData

    const title = 'Classes & Lessons - ' + organization.organization.name + ' ' +
      organization.target_locations[0]

    const description =
      (organization.organization.name
        ? organization.organization.name
        : '') +
      ' is ' +
      (organization.services.length > 0
        ? organization.target_locations[0]
        : '') +
      "'s premier " +
      (organization.services.length > 0
        ? organization.services[0].name
        : '') +
      ' and ' +
      (organization.services.length > 1
        ? organization.services[1].name
        : '') +
      ' training centers'

    const logo = process.env.AMAZONAWS_IMAGE_URL +
      organization.organization.primary_logo_id + '_350.' + organization.organization.logo_extension

    const favicon = logo

    const domain = 'https://' + this.$store.state.domain

    return {
      title,
      meta: [
        {
          name: 'description',
          content: description
        },
        {
          property: 'og:title',
          content: title
        },
        {
          property: 'og:site_name',
          content: organization.organization.name
        },
        {
          property: 'og:description',
          content: description
        },
        {
          property: 'og:image',
          content: logo
        },
        {
          property: 'og:url',
          content: domain
        },
        {
          name: 'twitter:title',
          content: title
        },
        {
          name: 'twitter:description',
          content: description
        },
        {
          name: 'twitter:image',
          content: logo
        }
      ],
      link: [
        { rel: 'canonical', href: domain },
        { rel: 'icon', href: logo },
        { rel: 'shortcut icon', href: logo },
        { rel: 'apple-touch-icon', href: logo },
        { rel: 'icon', type: 'image/x-icon', href: favicon }
      ]
    }
  }
}

Answer 1

不可能将任何参数直接传递到您的head()方法中，但是this是available there。是否直接在页面上定义head()还是使用mixin都无关紧要。只要确保不要在单个页面上覆盖它即可。...

您可以在Vuejs中将参数传递给mixin吗？

1 个答案: